How to sync props to state using React hooks : setState()?

0 votes

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

Jun 1 in Laravel by kartik
• 20,470 points
266 views

1 answer to this question.

0 votes

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!!

answered Jun 1 by Niroj
• 43,540 points

Related Questions In Laravel

0 votes
1 answer

How to set a new value for data-url attribute using jquery?

Hii, In your line: $(this).attr('data-url',value.url); are you sure this refers to the ...READ MORE

answered Apr 14 in Laravel by Niroj
• 43,540 points
195 views
0 votes
1 answer

How to download and install Lavavel framework?

Hey @kartik, First you must have xampp install ...READ MORE

answered Mar 17 in Laravel by Niroj
• 43,540 points
124 views
0 votes
1 answer

How to change Laravel official name to any customize name?

Hey, You just need to go Laravel folder through ...READ MORE

answered Mar 17 in Laravel by Niroj
• 43,540 points
55 views
0 votes
1 answer

How to pass URL param in Laravel?

Hello, First you have to go to routes ...READ MORE

answered Mar 18 in Laravel by Niroj
• 43,540 points
404 views
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17 in Web Development by anonymous
• 20,470 points
62 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20 in Web Development by Niroj
• 43,540 points

edited Jan 21 by Niroj 95 views
0 votes
1 answer

What is data binding in AngularJS?

Data binding is synchronization of data between the ...READ MORE

answered Jan 23 in Web Development by Niroj
• 43,540 points
54 views
0 votes
1 answer

How to make a new page with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 43,540 points
99 views
0 votes
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 43,540 points
1,345 views