How to access data in a child react component from a parent react component

Question

I'm new to ReactJS. I want to be able to set some properties of a React component and then be able to access it from a parent React component. But I'm not entirely sure how to do this. For example, consider the following two classes:

export default class SubWindow extends React.Component {

    click(event)
    {
        this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()});
    }

    render()
    {
        return (
        <ul>
            <li onClick={this.click.bind(this)}>0</li>
            <li onClick={this.click.bind(this)}>1</li>
            <li onClick={this.click.bind(this)}>2</li>
            <li onClick={this.click.bind(this)}>3</li>
        </ul>
        );

    }

}



export default class MainWindow extends React.Component {

    click(event)
    {
        console.log(SubWindow.myCollection);
    }

    render()
    {
        const SubWindow = require('./SubWindow').default;
        return (
            <SubWindow />
            <button onClick={this.click}>Log subwindow array</button>
        );

    }

}

Basically, I want the SubWindow to have a property called myCollection which is just an array of JSON objects. myCollection gets populated by each click on the list item.

Later, I want to be able to console.log(SubWindow.myCollection) when I press on a button in the parent window. My question how do I access the SubWindow.myCollection from a parent react component?

Answer 1

I would recommend you to solve this problem by using callback. MainWindow is creating SubWindow , and you can give here a callback function as a property. For example:

<SubWindow onClick={this.onSubwindowClick} />

Now in your SubWindow class, just call this callback inside your click function:

click(event)
    {
        this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()});
        this.props.onClick(/* data you want to pass to the parent */);
    }

Also you have to define onSubwindowClick in the class MainWindow . This function should receive any data you wish from child class - the data which you pass from child where I put comment /* data you want to pass to the parent */ .

Also, don't forget to bind this to that onSubwindowClick function. This is usually done in constructor of the class, which I suggest you to create for each component.

You can find good example about "passing data to parent" on React's pages. You can take a look at the article Thinking in React , particularly section "Step 5: Add inverse data flow".

Answer 2

just pass a function to you child component, and the function is bind to the parent component's 'this', actually you just created a closure.

then in your parent component, the function's args are passed in your child component, meanwhile your parent component's scope has access to the args, so in the parent scope you can get access to the data in the child scope.