score:0
one solution is to make a generic change()
function with a parameter for the key that should be changed:
change(key, value) {
setstate({key: value, ...this.state});
}
now when you want to add a listener to a child component:
<foo onchange={ value => change('foo', value) }/>
<bar onchange={ value => change('bar', value) }/>
score:1
when we see how react works. it is based on one-directional data flow. so, usually the application state is kept at the top most component (say, app component) in your case. so that data/state can be passed down as props to the component that needs it.
there, however may be the cases where children components of the parent, needs to work with the same data(say in case of an event - a button click that happens in the child component.) in that case we write a function in the parent component and pass the function as props to the children, so that the state gets updated in the parent itself and any child gets updated data.
in pure react (without using any state management library), we have to pass the state as props to work with our app. but in case you choose to use a state management library such as redux, then the components (known as containers) can directly communicate with the application state.
and if your application state contains objects within objects(like you have shown) or array of objects containing more objects, then you cannot use setstate() to update the state directly. in most of the cases, you take copy of the state and then use json.parse(json.stringify(state)) to do deep cloning and work with the state in a best possible manner.
there are other things in the example, the functions that you have used within the class , you need to bind the scope of this variable to point to the current class. this we do inside the constructor method, or simple make use of arrow function in order to avoid errors.
if you need more explanation, i will share with you :)
score:1
when you see that the state of your react application is getting out of hand, it's usually time to bring in a state management library like redux (there're a few and redux is the most popular one).
it'll help you have a global state that is managed in a reasonable way.
Source: stackoverflow.com
Related Query
- React classes in main component constructor
- set initial react component state in constructor or componentWillMount?
- Constructor getting called twice React Component
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- Is there a reason people prefer using the constructor of a React component instead of componentWillMount?
- Is there a method to reset a react component using ES6 classes to its initial state?
- Why console.log(super) in React Component constructor throw an Error?
- React router get current location on main router component
- When do i need to pass prop to constructor of a react component using super(props)?
- Common code in React component constructor and componentWillReceiveProps
- How to use react-spring from react component classes
- Constructor and render methods run twice in react component
- React constructor called only once for same component rendered twice
- React Router calls component constructor when switching routes
- ipcRenderer in React component constructor
- utility classes in styled component react
- Is it possible to safely destructure an ES6 React Component class in its constructor signature?
- React - Styled Component with multiple classes
- Meteor React Komposer: Execute Component Constructor AFTER ready subscription
- Handling promise chain inside a React component constructor
- How to change main content component based on sidebar component in one layout in React js
- How to sinon spy a React component constructor - unit testing?
- Using Constant component for styling your main component in React JS
- Router events cause an error while being used on the constructor Warning: Can't perform a React state update on an unmounted component
- How can I convert a class with a constructor to a functional component using React Hooks?
- Function of assigning empty state in the react component constructor
- Customize existing component with fixed css classes in React
- How to get my withStyles classes to work in my export class component in my React app
- How to add script to React component and use as constructor function
- React Dumb component Typescript error: Element is not a constructor function for JSX elements, property 'render' is missing
More Query from same tag
- How to choose between class methods and properties in react?
- How to require a mountable prop set via reference in React
- ReactJS - unable to show stuff on the DOM that is in another component
- GraphQl array object inside object
- How to call from parent component child function in react, typescript and redux
- How to send a State value to a component at the same level as a prop in React?
- Laravel Authentication without registration and custom user retrieval
- Change color label TablePagination Material UI
- Warning to make a cleanup function in useEffect() occurs occasionally
- How can I use a button to change the Theme for material UI on my site? this is where I am so far
- How can I dynamically create a component based on a prop or variable using React.createElement
- How to display JS error from source map in DOM
- ReactJS: this is reserved word
- React Hook useEffect received a function whose dependencies are unknown
- How to achieve basic animation in React with Om/Clojurescript (coming from jQuery)?
- what is & in typescript and javascript?
- Material UI Autocomplete unique id problem
- Running into cors issue trying to use Google API
- React: function passed as a prop not working correctly
- Material ui tool tip not closing when clicked on element
- Why Is the button returning null values for my event.target in my button?
- Querying data from DynamoDB using AWS Amplify
- json-server is not recognized as an internal or external command
- persist state after page refresh in React using local storage
- error decorators-legacy. Not vorking mobx+react js
- TypeError: Cannot read property 'show' of null
- Nuka Carousel not displaying in react slideHeight props 0
- How to differentiate multiple state change on useEffect hooks second argument?
- How to uncheck selected radio input onChange with react to reset current showing data?
- Callback Async function inside async function ! Is correct?