score:0
as @ybrodsky said, you should rather pass down a function which does mutate the state. here is an example:
class app extends component {
constructor() {
super();
this.state = {
name: 'react'
};
this.update=this.update.bind(this);
}
update(nextstate) {
this.setstate(nextstate);
}
render() {
return (
<child updateparent={this.update} />
);
}
}
const child = ({updateparent}) => (
<button onclick={() => updateparent({name: 'foo bar'})}>click</button>
);
you now have full control over the state of the parent in the child. just pass the object to be shallowly merged into the parent state. in this example, name
in app
will change to foo bar
on button click.
score:0
i guess in functional components its possible to send your setstate to childrens and change parent state in them but not in class base components
score:2
you shouldn't pass the setstate directly, as the setstate function will not change the state immediately.
as the documents said:
think of setstate() as a request rather than an immediate command to update the component. for better perceived performance, react may delay it, and then update several components in a single pass. react does not guarantee that the state changes are applied immediately.
setstate() does not always immediately update the component. it may batch or defer the update until later. so you'd better to manage the calling of setstate function together as there may have competing of mutating parent's state. it is not recommended to pass this function to another component.
encapsulating the calling of setstate function in one class makes your code stronger.
score:5
but this is simple than passing function.if i want change many state change. this will be simple and faster way compare to passing function right ?
the correct way to do this is as simple as yours and does not violate best practices:
class app extends component {
state = {
name: 'react',
};
render() {
return (
<div>
<hello name={this.state.name} />
<p>
start editing to see some magic happen :)
</p>
<child onclick={() => this.setstate({name: 'viswa'})}/>
</div>
);
}
}
const child=({onclick})=>(
<button onclick={onclick}>click</button>
);
Source: stackoverflow.com
Related Query
- Can we pass setState as props from one component to other and change parent state from child component in React?
- Unable to pass props from parent to child and save it in state of child component
- How can I pass the state from one component to another and how can I modify the state?
- How can I pass props from one component to another using Link and router in react
- How can i pass and display data from one component to other component?
- Change state in parent component from child, then pass that state as property and change state in child component
- how to pass props from one component to other in react router that don't have parent child relationship?
- Pass state back to parent AND pass other props from parent to child in React
- How can i pass different props to more than one children component from the parent one in React?
- ReactJS - How to pass state data and functions from one functional component to other component?
- How can I correctly pass state as props from one component to another?
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- What are the different types of props can be send from one component to the other using properties in React?
- fetch data from mongoDB, setstate and pass props to child component is not working
- How can I change a child's state from the parent component
- Pass state as props from parent to child and then update parent from child onSubmit
- How to pass route parameters from one Component and display in the other
- Update state on Parent component from input in Child using props and useState Hook
- How can I change the state of a parent component from a child component?
- How to pass state and props from app.js to other files?
- How can I pass image url from parent component to child component via props [REACT.JS]
- Trying to get props from map() ES6 and pass to other component
- how does react props merge state passed from parent component and redux store
- Is there a way to access formik's submit function, values and other props from a parent component
- How can i initialize state by passing props from parent component to child component in ReactJS?
- pass both props and a state object and let child component move parent component
- how can I change props of component that pass from higher component . reactjs
- How can I pass state from one component to set another state?
- Can I change one component State from another component?
- Reactjs - how can i take input from one component(inputbox) and use it in other component
More Query from same tag
- ReactJS Passing state from parent to child
- Converting an Array of Objects to an Object of arrays
- React createElement children syntax
- Fetching data from local JSON file using axios and displaying data
- Input field not binding with the state
- React Enzyme testing Portals
- Maintain other styles after rotating text in flex box
- Updating Form values with functions. {React, withFormik}
- fix missing dependency warning when missing an object in useEffect React Hook?
- Ask user for confirmation before updating form value in final-form
- next.js: is it possible to do SSR only for google bot and other crawlers, not for users?
- TS2339 - Can't map request from API
- Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
- React: dynamically add input fields to form
- How to open a picture by link (<a></a>)?
- How to display content of an state variable of array type in a component
- How to add different text after the map function has rendered 3 times?
- Accessing onClick fn of a nested button in Enzyme & React Hooks
- React JS Crud Issues with mutable data
- webpack and react recognise css class names
- redux pre-binding through bindActionCreators, an anti-pattern?
- My component function is not re-rendering after state change even that I matched the state, returned new state and connected the component,
- Javascript `this` - reference containing object
- React - Too many re-renders after adding onClick
- How to access typescript type keys?
- How to get rid of : Warning: Invalid value for prop `settaskstatus` on <span> tag
- Ignore initial Transition for first mount React-Spring
- Send request on unload event
- How to handle select change using material-ui in reactjs and Mongodb
- React Inline Condition