How do I set a ref when using react.createElement?

Question

I want to get a ref to the component represented by the element i create, but cannot get it to work. I tried this:

            var comp = React.createElement(
                MyComp,
                {
                    props: myprops,
                    ref: "mycomp"
                }
            );

But this doesn't work. How do i set a ref on it so the parent can call this.refs.mycomp.someMethod()?

Answer 1

https://facebook.github.io/react/docs/top-level-api.html#react.createelement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

The second parameter of the function is an optional props object for the component. Unless you want to refer to the props in the component as props.props you can splat the myProps object:

var comp = React.createElement(MyComp, { ...myprops, ref: "mycomp" });

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.initialValue = props.initialValue;
    this.state = { value: this.initialValue };
    this.increment = this.increment.bind(this);
    this.reset = this.reset.bind(this);
  }
  
  increment() {
    this.setState({ value: this.state.value + 1 });
  }
  
  reset() {
    this.setState({ value: this.initialValue });
  }
  
  render() {
    return (
      <div className="child">
        <h1>Counter: {this.state.value}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.reset = this.reset.bind(this);
  }
  
  reset() {
    this.refs.mycomp.reset();
  }
  
  render() {
    const myProps = { initialValue: 1 };
    const Comp = React.createElement(MyComp, { ...myProps, ref: "mycomp" });
    return (
      <div className="parent">
        {Comp}
        <button onClick={this.reset}>Reset</button> Calls this.refs.mycomp.reset
      </div>
    );
  }
}

  
ReactDOM.render(<App />, document.getElementById('app'));

.parent {
  background-color: #555;
  color: #FFF;
  padding: 10px;
}

.child {
  background-color: #888;
  padding: 10px;
}

h1 {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>