reactjs - Get another component input value React js

Question

I have two components one is app component and other one is sidebar component i have been using input field in side bar and i want to get the value of that input field in my app component on click how this could be possible ?

Answer 1

You can try lifting the state up.

Create a new component that will contain your two components. In that new component, create a function that you will pass as props inside the sidebar component.

class ContainerComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            valueThatNeedsToBeShared: '' 
        }
    }

    handleChange(e) {
        this.setState({valueThatNeedsToBeShared: e.target.value})
    }

    render() {
        return (
            <div>
                <AppComponent value={this.state.valueThatNeedsToBeShared} />
                <SidebarComponent handleChange={this.handleClick.bind(this)} value={this.state.valueThatNeedsToBeShared} />
            </div>
        )
    }
}

const SidebarComponent = ({handleChange, value}) => <aside>
    <input value={value} onChange={handleChange} />
</aside>

const AppComponent = ({value}) => <div>
    value from sidebar: {value}
</div>