React - How to call method in Child to setState, ONLY when a method in Parent was called?

Question

I have a parent component and 2 children. Each child is an input field and the second input depends on the selection from the first input field. Is it possible in react to call a function insight sibling 2, only IF a function in Parent was executed? In my case: Child1 provides ID, parent uses ID, Child2 should make http request with same ID.

Below in my code (I left out a lot just so I don't have too much (unnecessary code) so if I missed something pls let me know) inside Parent,the "updateId" method received its argument from child1, ONLY when this happened (id was provided), only then I want to call the "getData" method in Sibling. I was thinking I could create boolean inside Parent set to true, when id is given, pass it to Sibling, calling the "getData" method only when its true but as I understand, that wouldn't be possible in react?! How could I do that?

PS - I am intentionally setting state in my children components as I was trying to keep the inputs (child=input) independent which can easy be exchanged.

export default class Parent extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            id: ""
        }
        this.updateId=this.updateId.bind(this);
    }

    updateId (id){
        this.setState({
            id:id
        })

    }

    render() {
        return (
            <div>
                <Child onChange={this.updateId} />
                <Sibling id={this.state.id}/>
            </div>
        )
    }
};

import apicall from :/....jsx;
export default class Sibling extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            siblings: []
        }
        this.getData=this.getData.bind(this);
    }

    getData (this.props.id){
        apiCall(this.props.id).then(response=> {
            this.setState({
                siblings:response
            })

    }

    render() {
        return ...
    }
};

    export default class Child extends React.Component {
    ...
    get ID
    ...
    call this.props.onChange(selected.value)

    };

You could just lift the state of the child component up to the parent and let the parent component supply the necessary information to child. I think this answer might help you https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693 — Shubham Khatri, Jan 23 '18 at 14:31
Yes but the whole point is that i am trying not to do that- I want the options of each input (child component) to be inside the state of that part. child — 2018code2018, Jan 23 '18 at 14:45
so what other thing you can do is that you can access the child ref in parent and execute the function using that ref from parent like https://stackoverflow.com/questions/40235420/call-child-component-method-from-parent-in-react/40235756#40235756 — Shubham Khatri, Jan 23 '18 at 14:49
What I ended up doing is using componentWillReceiveProps so my method in child will be called as soon as it receievs props and it works fine. — 2018code2018, Jan 24 '18 at 09:58

score 1 · Answer 1 · answered Jan 23 '18 at 15:15

In a case like this, I normally keep my state up in the parent (or in some system like Redux), and keep my child components simple and dumb. So, I'd do the API work in the parent and pass the resulting data down into the children.

That said, your Sibling component could hook into componentWillReceiveProps and update its state if the ID property is changing.

https://reactjs.org/docs/react-component.html#componentwillreceiveprops

score 1 · Answer 2 · answered Jan 23 '18 at 15:27

1

To avoid confusion in between child to child communication use Redux, It helps you to achieve the functionality you want. And it also helps you to make the dumb component.

answered Jan 23 '18 at 15:27

RANVIR GORAI

1,226
11
10

React - How to call method in Child to setState, ONLY when a method in Parent was called?

2 Answers2