CODEWITHSUNDEEP
javascriptreactjsjsx
CRod
CRod

Reputation: 315

How would I structure react components that must receive data from a modal

Right now my React container looks something like this:

class TableData extends Component
{
some React Functions and state changes. 
<Sidebar passdata as props/>

}

And inside the Sidebar I have a modal, that needs to update state to both the Sidebar component and TableData Component.

I do not know if you could pass props to the parent component in React but I know it is not recommended. What is the recommended course of action in these type of problems?

Upvotes: 0

Views: 48

Answers (1)

afuous
afuous

Reputation: 1498

You are correct that you cannot pass props to the parent component. However, the parent component can pass a callback as a prop to its children that is called when values change.

class TableData extends React.Component {

    constructor(props) {
        // ...
        this.state = {
            name: originalState,
        };
    }

    handleStateChange(newState) {
        this.setState({ name: newState });
    }

    render() {
        // ...
        <Sidebar onStateChange={this.handleStateChange.bind(this)} />
        // ...
    }
}

class Sidebar extends React.Component {
    // ...
    this.props.onStateChange(newState);
    // ...
}

Upvotes: 2

Related Questions