Mike jones Mike jones - 2 months ago 7
React JSX Question

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?

Answer

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);
    // ...
}
Comments