CODEWITHSUNDEEP
reactjsredux
massther
massther

Reputation: 323

React+redux get data from child component

I have creator, I mean step1 -next-> step2 -next-> ... In my parent component I have buttons preview and next, steps content are render as child.

class MyCreator extends React.Component {
   render() {
      return (
         <div>
            {this.renderStep(this.props.step.id)}
         </div>
         <div>
            <button>back</button>
            <button>next</button>
         </div>
      );
   }
}

In a step I have a component which has only two methods: getData, setData. This is a third party component (so I cannot change implementation). When I click button next I want to getData from the current step. I mean call some generic method on each step child component, like leaveStep. Then leaveStep returns some data, which I will pass to redux action.

Upvotes: 2

Views: 629

Answers (1)

Tiago Alves
Tiago Alves

Reputation: 2316

If I got it right, the ideal solution would be lifting state up to the Parent component, take a look at this part of the React documentation. But since you don't have control of your components and it may create you some problems to sync the states. Something like this will do the trick:

class Parent extends Component {
    state = {
        childData: null
    }

    getChildData = (data) => {
        this.setState({
            childData: data,
        }, () => { console.log(this.state); });
    }
    render() {
        return <Child setData={this.getChildData} />
    }
}

class Child extends Component {
    state = {
        data: 'this is child data'
    }

    render() {
        return <button onClick={() => this.props.setData(this.state.data)}>Next</button>;
    }
}

But remember that this creates a duplicate state, breaking the single source of truth and can be very messy for large applications.

Upvotes: 1

Related Questions