I am trying to build a portal where I have 3 ponents.

Parent ponent

->Child 1

->Child 2

From main ponent

-if (no files are selected) then GUI should show just the Child 1 and Count and pathnames of files associated with Application

-else if (user has clicked on any file) then GUI should show the filename and nodes associated to it.

I am trying to achieve this but i am confused in how to pass info from parent to child and vice versa.

In the code given below in Child 1.js when user click on path, the Parent ponent should update the GUI view by calling Child2 rather than calling Child1 .

How can i achieve this?

I am trying to build a portal where I have 3 ponents.

Parent ponent

->Child 1

->Child 2

From main ponent

-if (no files are selected) then GUI should show just the Child 1 and Count and pathnames of files associated with Application

-else if (user has clicked on any file) then GUI should show the filename and nodes associated to it.

I am trying to achieve this but i am confused in how to pass info from parent to child and vice versa.

In the code given below in Child 1.js when user click on path, the Parent ponent should update the GUI view by calling Child2 rather than calling Child1 .

How can i achieve this?

• javascript
• reactjs
• ecmascript-6

2 Answers 2

For update parent ponent state from child ponent with arguments. You need to create method in parent ponent, that set state from arguments from this method. And pass this method to child ponent by props.

class Parent extends React.Component {
    state = {text: ""}

    updateText = text => {
        this.setState({text: text})
    }

    render () {
        return (<Child updateText={this.updateText}>)
    }
}

class Child extends React.Component {
    render () {
        return (
            <button 
                onClick={
                    () => this.props.updateText("updated state from child ponent")
                }
            >Update State</button>
        )
    }
}

Building on what galishmann provided, just pass y.Filename to the function in props as it already expects a vlaue as a parameter.

class Parent extends React.Component {
    state = { text: "" }

    updateText = text => {
        this.setState({ text: text })
    }

    render() {
        return (<Child updateText={this.updateText} />)
    }
}

class Child extends React.Component {
    ....
    ....
    ....

    render() {
        const { updateText } = this.props;
        const pathElement = this.state.groupedByAppName.map((x) => {
            return (
                <Collapsible trigger={x.AppName + '\t' + x.Count + ' files'} transitionTime={20}>
                    {
                        x.section.map((y) => <p filename={y.FileName} onClick={() => updateText(y.Filename)}>{y.Path}</p>)
                    }
                </Collapsible>
            )
        })
        return <div> {pathElement} </div>
    }
}