How to sync props to state using React hooks setState

Question

I am trying to set the state using React hook setState() using the props the component receive.

 I have tried using the below code:

import React,{useState , useEffect} from 'react';

const Persons = (props) =>  {

    // console.log(props.name);

   const [nameState , setNameState] = useState(props)

   console.log(nameState.name);
   console.log(props.name);

   return (
            <div>
                <p>My name is {props.name} and my age is {props.age}</p>
                <p>My profession is {props.profession}</p>
            </div>
        )

}

export default Persons;

The issue is the state is being set upon component being loaded. But when it receive new props, the state is not getting updated.

 How to update the state in this case?

 Thanks in advance

Answer 1

Hello @kartik,

useState hooks function argument is being used only once and not everytime the prop changes. You must make use of useEffect hooks to implement what you would call the componentWillReceiveProps/getDerivedStateFromProps functionality.

Code:

import React,{useState , useEffect} from 'react';

const Persons = (props) =>  {
   const [nameState , setNameState] = useState(props)

   useEffect(() => {
       setNameState(props);
   }, [props])

   return (
            <div>
                <p>My name is {props.name} and my age is {props.age}</p>
                <p>My profession is {props.profession}</p>
            </div>
        )

}

export default Persons;

Hope this work!!

If you need to know more about React, Its recommended to join React JS Course today.

Thank You!!