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?

React architecture approaches this differently: any component can have props and state. All props are by definition already known to parent. And state is not supposed to be accessible to parent. This official react page explains the principle — wintvelt
– wintvelt, Commented May 21, 2016 at 7:47

Luka · Accepted Answer · 2016-05-21 03:41:20Z

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".

ZhiLI · Accepted Answer · 2016-05-21 07:24:48Z

1

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.

answered May 21, 2016 at 7:24

ZhiLI

2092 silver badges4 bronze badges

1 Comment

ChrisW Over a year ago

I don't understand this answer; perhaps a little "for example" would help to illustrate what you're saying.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related