9. Lifting state management - florypaul/ReactJS GitHub Wiki
Scenario - sharing the form input entered values to a different component to display those values
App.js has
- we need to pass value from AddUserForm.js to App.js (is called lifting state management, sharing the state stored values to App.js
for this, in App.js
- import { useState} from 'react';
- give a custom attribute to call a function that fetches values
https://github.com/academind/react-complete-guide-code/tree/08-practice-project/code 3. write the code in getFormValueFunc const [usersList, setUsersList] = useState([]);//passing empty array in useState const getFormValueFunc = (uName, uAge) =>{ setUsersList(prevState=>{ return [ ...prevState, { name: uName, age: uAge, id: Math.random().toString(); } ] })
}
- In AddUserForm pass the user entered form values to setUsersList
setUsersList(enteredUserName, enteredAge)
- then from App.js pass form values to DisplayUserList.js
In DisplayUserList.js component you use props.users.map() to display user name and age