Access React component functions from outer context

Question

I have Class1 which is only a container for Class2. I declare Test component in Class1. Now I want to pass Test into Class2 as a parameter.

Is it possible to access Test component's context being inside Class2 in place where I put a comment in?

export default class Class1 extends React.Component {
    render() {
        let test = (<Test />);

        return (
            <Class2 test={test} />
        );
    }
}

export default class Class2 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let { test } = this.props;

        // how to access Test class context?
        test.setValue("WHERE IS MY CONTEXT?");

        return (
            <div>{ test }</div>
        );
    }
}

export default class Test extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: ""
        };
    }

    setValue(val) {
        this.setState({
            value: val
        });
    }

    render() {
        return (
            <div>{ this.state.value }</div>
        );
    }
}

I tried to find something on Web and to examine the test object, but I found nothing... When I try to access test.props directly I get a React error that props are read only and can't be accessed...

If you need access to child state in a parent container, move the state up to the parent. — azium
– azium, Commented May 16, 2016 at 14:16
What do you mean by moving the state up to parent? Moving logic from Test up to Class1? I don't want this. My project is simple, but generic Wizard component. It works in this way: I have a class that is actually a body component for the Wizard. I pass this class to the Wizard, but I can have more than one template defined inside. So I want to inform my Test template to set the page and refresh itself. It is written in the same way as this example in the question. I know how to pass context down to the child, but is it possible in the opposite way, from child to parent? — Nickon
– Nickon, Commented May 16, 2016 at 14:22
Data only flows form parent -> child. But like any other data you can also pass down callback functions through which you can pass child data as argument, which is handled in the parent. — azium
– azium, Commented May 16, 2016 at 14:30
If you want to inform your child that something has changed, then you pass down new props and listen to things in componentWillReceiveProps. — azium
– azium, Commented May 16, 2016 at 14:32
@Nickon Why not use children to pass Test instead of a prop? — Aaron Beall
– Aaron Beall, Commented May 16, 2016 at 14:59

Aaron Beall · Accepted Answer · 2016-05-16 14:58:49Z

1

Use props instead of state:

let { test } = this.props;

<div>{ React.cloneElement(test, {value: "Hello World"}) }</div>

And in Test:

<div>{ this.props.value }</div>

PS: Context means something else in React.

edited May 16, 2016 at 14:58

answered May 16, 2016 at 14:35

Aaron Beall

52.6k26 gold badges91 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

omerts · Accepted Answer · 2016-05-16 14:38:38Z

0

A complete example:

class Class1 extends React.Component {
    render() {
        return (
            <Class2>
                <Test />
            </Class2>
        );
    }
}

class Class2 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {React.cloneElement(this.props.children, {text: "WHERE IS MY CONTEXT?"})}
            </div>
        );
    }
}

class Test extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>{ this.props.text }</div>
        );
    }
}

JSFiddle

answered May 16, 2016 at 14:38

omerts

8,8782 gold badges34 silver badges40 bronze badges

Collectives™ on Stack Overflow

Access React component functions from outer context

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related