Invoke function from React component declared as variable

Question

How to invoke React component's function when this component is given in variable? I have a Parent that passes Test class into Child component, and this child wants to change something in Test.

export class Parent extends React.Component {
    render() {
        let test = (<Test />);
        return (<Child tester={test} />);
    }
}

export class Child extends React.Component {
    render() {
        this.props.tester.setText("qwerty"); // how to invoke setText, setState or something like that?
        return ({this.props.tester});
    }
}

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

        this.state = {
            text: this.props.text || ""
        };
    }

    setText(text) {
        this.setState({ text: text });
    }

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

What do you want to change in Test? You could pass everything you want to change as props and render it right away. No need for a function. — Lars Graubner
– Lars Graubner, Commented May 12, 2016 at 13:12
I want to pass something inside Child, where Test is only the reference for the object passed from Parent. I can't do simply this.props.tester.text = "sth" — Nickon
– Nickon, Commented May 13, 2016 at 5:34

toshi · Accepted Answer · 2016-06-30 05:30:40Z

I think you should think about life cycle of react components.
Please try the code below(I just added logging), and observe logs carefully.

export class Parent extends React.Component {
    render() {
        let test = (<Test />);
        return (<Child tester={test} />);
    }
}

export class Child extends React.Component {
    render() {
        console.log("Child render"); // <= logging added!
        // this.props.tester.setText("qwerty"); 
        // What kind of object is 'this.props.tester(= <Test />)' here???
        return ({this.props.tester});
    }
}

export class Test extends React.Component {
    constructor(props) {
        super(props);
        console.log("Test constructor"); // <= logging added!
        this.state = {
            text: this.props.text || ""
        };
    }

    setText(text) {
        // this.setState({ text: text });
        // this is another problem. We cannot call setState before mounted.   
        this.state.text= text;  
    }

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

If so, you will see 2 important facts.

'Test' component is not instantiated yet, when you call 'setText'.
How can we call a method of object which is not instantiated? Cannot!
this means 'this.props.tester' is not an instance of 'Test' component.

But if you really want to exec your code, modify Child.render like this.

render() {
    var test = new Test({props:{}});
    // or even this can work, but I don't know this is right thing
    // var test = new this.props.tester.type({props:{}});
    test.setText("qwerty");
    return test.render();
}

But I don't think this is a good way.

From another point of view, one may come up with an idea like,

render() {
    // Here, this.props.tester == <Test />
    this.props.tester.props.text = "qwerty";
    return (this.props.tester);
}

but of course it's not possible, because 'this.props.tester' is read-only property for Child.

Collectives™ on Stack Overflow

Invoke function from React component declared as variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related