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, 2020 in Laravel by kartik
• 37,490 points
1,608 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, 2020 by Niroj
• 82,680 points

Related Questions In Laravel

0 votes
0 answers

how to create exception in react router using Route::get('/{path?}', 'IndexController@index')->name('index') ->where('path', '.*');

I am using react routers within Laravel ...READ MORE

Nov 14, 2020 in Laravel by datso
• 120 points

recategorized Nov 16, 2020 by Niroj 70 views
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, 2020 in Laravel by Niroj
• 82,680 points
1,294 views
0 votes
1 answer

How to Install Laravel without using Composer?

Hello @kartik, If you really wanted to, you ...READ MORE

answered Aug 10, 2020 in Laravel by Niroj
• 82,680 points
1,065 views
0 votes
1 answer

How to exclude certains columns while using eloquent?

Hello @kartik, Using hidden array in model is good, but ...READ MORE

answered Aug 11, 2020 in Laravel by Niroj
• 82,680 points
1,900 views
0 votes
1 answer
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, 2020 in Web Development by anonymous
• 37,490 points
170 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, 2020 in Web Development by Niroj
• 82,680 points

edited Jan 21, 2020 by Niroj 225 views
0 votes
1 answer

What is data binding in AngularJS?

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

answered Jan 23, 2020 in Web Development by Niroj
• 82,680 points
119 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, 2020 in Laravel by Niroj
• 82,680 points
1,622 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

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

answered Mar 18, 2020 in Laravel by Niroj
• 82,680 points
6,832 views