Ad
How To Re-use React Callback For Lifting State Up?
I don't understand how to abstract my callback function that is passed to the instances of my child component as a prop to lift state up to the parent component:
/* Parent */
typeCallback = (dataFromChild) => {
var filter = {...this.state.filter}
filter.type = dataFromChild;
this.setState({filter}, () => console.log(this.state));
}
makeCallback = (dataFromChild) => {
var filter = {...this.state.filter}
filter.make = dataFromChild;
this.setState({filter}, () => console.log(this.state));
}
...
/* Parent render() */
<Child url='http://localhost:5000/device_type' placeholder='Type' parentCallback={this.typeCallback}/>
<Child url='http://localhost:5000/device_make' placeholder='Make' parentCallback={this.makeCallback}/>
I would like to abstract my callback function to take in the name of the state variable of the parent that it should update. At the moment I have 6 instances of Child component and 6 corresponding copies of callback function tailored to update the target state variable (i.e. this.state.filter.type, this.state.filter.make)
/* Child */
handleSelectorValueCreate = () => {
fetch(this.props.url, {
method: 'POST',
headers: {"Content-Type": "application/json"},
body: val,
})
.then(res => res.json())
.then(response => { this.setState({value: response}, () => this.sendData() ); })
sendData = () => {
this.props.parentCallback(this.state.value);
}
/* Child render() */
<Child onChange={this.handleSelectorValueChange} />
Ad
Answer
Yes you could extend parent's prop of function's arguments to do this
/* Parent */
commonCallback = (dataFromChild, type) => {
var filter = { ...this.state.filter };
filter[type] = dataFromChild;
this.setState({ filter }, () => console.log(this.state));
};
....
<Child
url="http://localhost:5000/device_type"
placeholder="Type"
parentCallback={liftState => {
/* Use type as second parameter for differentiating*/
this.commonCallback(liftState, 'type');
}}
/>
This creates common callback with two parameters - stateToLift
and type
.
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad