How to use States and Props like a Pro in React

I'd be happy to help you understand how to use states and props in React. You will come across them often in the upcoming project codes I will be writing out.

States and props are both important concepts in React that allow you to build dynamic and interactive components.

Here is a simple explanation regarding the duo:

States are variables that represent the internal state of a component. They allow you to keep track of changing data within a component, and are only used within the component that declares them. States are often used to store information that will change within a component, such as a list of items or a value of an input field.

Props, on the other hand, are variables that are passed to a component from a parent component. They are used to pass data from one component to another, and are commonly used to customize the appearance or behavior of a child component. Props are read-only and cannot be modified within the child component.

To declare states in a React component, you can use either a class-based or functional approach.

To declare states in a class-based component, you can use the constructor method to initialize the state object. Here's an example:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'initial value'
    };
  }
}

The truth is that the use of class based components in react has greatly reduced. Only older codebases use them, however, you still need to have a fair knowledge of how they work. I will discuss about them later.

Let's move to declaring states in functional components.

The useState hook is used to declare states in functional components. Here's an example:

import { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState('initial value');
}

I hope that gives you insight about how to use states in react.

Now, let's move to passing props.
To pass props to a component, you can use the props object in a class-based component or the second argument of the useEffect hook in a functional component. Here's an example of passing props in a class-based component:

class MyComponent extends React.Component {
  render() {
    const { prop1, prop2 } = this.props;
    return (
      <div>
        <p>Prop 1: {prop1}</p>
        <p>Prop 2: {prop2}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent prop1="value1" prop2="value2" />,
  document.getElementById('root')
);

If the above code looks complex, don't worry, you will get acquainted with them as we progress.

In a functional component, props are passed like:

import { useEffect } from 'react';

function MyComponent(props) {
  useEffect(() => {
    console.log(props.prop1);
    console.log(props.prop2);
  }, []);
}

ReactDOM.render(
  <MyComponent prop1="value1" prop2="value2" />,
  document.getElementById('root')
);

So, i hope this has helped you in getting a basic understanding of what props and states are in react and how to use them.
If you have any questions, feel free to ask in the comment section below.
Thanks for your time.