React JS reference function in another component

Question

I'm trying to get a button rendered through another component to reference and/or influence the state of a different component.

var Inputs = React.createClass({
  getInitialState: function(){
    return {count: 1};
  },
  add: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  render: function(){
    var items = [];
    var inputs;
      for (var i = 0; i < this.state.count; i++){
        items.push(<input type="text" name={[i]} />);
        items.push(<br />);
      }
    return (
      <div className="col-md-9">
        <form action="/" method="post" name="form1">
          {items}
          <input type="submit" className="btn btn-success" value="Submit Form" />
        </form>
      </div>
     );
   }
 });

I want to write a new component that will be able to access the add function in Inputs. I tried to reference it directly with Inputs.add like this:

var Add = React.createClass({
  render: function(){
    return (
      <input type="button" className="btn" value="Add an Input" onClick={Inputs.add} />
    );
  }
});

But that didn't work. How would I be able to access a component's functions through another component, or influence the state of a component through another component? Thanks.

Markus-ipse · Accepted Answer · 2014-01-11 13:52:33Z

10

You could accomplish this by creating a parent component that is responsible for managing the state and then just push the state down to the sub-components as props.

/** @jsx React.DOM */

var Inputs = React.createClass({

    render: function () {
        var items = [];
        var inputs;
        for (var i = 0; i < this.props.count; i++) {
            items.push( <input type="text" name={[i]} />);
            items.push(<br />);
        }
        return ( 
            <div className = "col-md-9"> 
                <form action = "/" method = "post" name = "form1"> 
                    {items} 
                    <input type="submit" className="btn btn-success" value = "Submit Form" />            
                </form>
            </div> 
       );
    }
});

var Add = React.createClass({
    render: function () {
        return (<input type = "button" className="btn" value="Add an Input" onClick={this.props.fnClick}/> );
  }
});

var Parent = React.createClass({
    getInitialState: function(){
        return {count:1}
    },
    addInput: function(){
        var newCount = this.state.count + 1;
        this.setState({count: newCount});
    },
    render: function(){
        return (
            <div>
                <Inputs count={this.state.count}></Inputs>
                <Add fnClick={this.addInput}/>
            </div>
        );
    }
});

React.renderComponent(<Parent></Parent> , document.body);

jsFiddle

edited Jan 11, 2014 at 13:52

answered Jan 11, 2014 at 13:44

Markus-ipse

7,4064 gold badges31 silver badges34 bronze badges

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

1 Comment

HMartch Over a year ago

I had the parent-child component setup already but was having trouble with the specifics for getting the child to use the parent's function. This answer helped me with the passing the function as a prop method, so thanks.

Clomp · Accepted Answer · 2016-05-02 23:09:44Z

1

You can call functions on the return value of renderComponent:

var Inputs = React.createClass({…});
var myInputs = React.renderComponent(Inputs);
myInputs.add();

The only way to get a handle to a React Component instance outside of React is by storing the return value of React.renderComponent. Source.

edited May 2, 2016 at 23:09

Clomp

3,3282 gold badges25 silver badges39 bronze badges

answered Sep 25, 2014 at 8:25

Sjoerd

75.9k16 gold badges140 silver badges180 bronze badges

Collectives™ on Stack Overflow

React JS reference function in another component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related