State And Props in React

         State and props in react are used to bind the data to the component.

State:

      - State in React is used to manage the data of the application. 
      - To manage state useState() hook is used.

        useState():
           This hook allows us to track state of a functional component.

           import {useState} from "react"
           Syntax: 
               const [color, setColor] = useState("black");

            here color is a state variable which will hold the value of the state, it could be any valid name and setColor is a function to update state value.

Note: useState() has only a single argument which is the initial state, the type of this argument could be any valid type like arrays, object, Boolean, number etc.

Let's create an application which takes a color as an input and change the text color based on the color entered.

Create a Color Component in react and copy the code:

     import {useState} from "react"

     const Color = () =>{

               const [color, setColor] = useState("blue");

               return(

                    <>

                         <h1 style={{color: color}}>Think Design And Create</h1>

                         <input type="text" placeholder="Enter color name here..." onChange ={e => setColor(e.target.value)} />

                    </>

               );

     }

     export default Color;

      Call this component in <App /> component or wherever you want as <Color />.
      Now try entering the color name in the input field like: pink, red, yellow etc. And see once you entered the correct color name, text changes color. 

Note: whenever the state value change, the component will re-render itself.

Props:

      Props in React is used to pass data from parent component to child component.

      Passing data from parent to child:

            <Color color ={value}>

      Example: Let say instead of passing the color from an input field in the same component, we want to pass this color value from App component to Color Component.

              import {useState} from "react"

             const App = () =>{

                     const [value, setValue] = useState("");

                     return(

                          <>

                              <h4>Parent Component: App</h4>

                               <input type="text" placeholder="Enter color name here..." onChange ={e => setValue(e.target.value)} />

                               <Color color={value}>

                          </>

                     );

             }

        Update Color.js as 

             const Color = (props) =>{

               return(

                    <>

                         <h1 style={{color: props.color}}>Think Design And Create</h1>

                    </>

               );

             }

            export default Color;

Note: State is mutable while props are immutable which means you cannot modify the value of props. However, the props value can be updated in the parent class which will reflect on child component.

Continue Learning: Pass Data from Child to Parent Component