Using refs to access components in React
<p>I am following a tutorial to understand how <code>React.js</code> works. I am stuck where using refs to access components. If anyone don't mind help look at my code and tell me where I am wrong. But, this is what I did. I have a general component <code>App</code> and html <code>Input</code> tag that update the <code>refs</code> in the <code>State</code>. But, I don't know why it's still showing <code>undefined</code></p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      red: 0,
      green: 0,
      blue: 0
    }
    this.update = this.update.bind(this);
  }

  //To manage the state
  update(e) {
    this.setState({
      red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value,
      green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value,
      blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value
    })
    console.log(this.state); //&lt;This is giving me Object {red: undefined, green: undefined, blue: undefined}
  }

  render() {
    return (
      &lt;div&gt;
        &lt;Slider ref="red" update={this.update}/&gt;
        {console.log(this.state.red)} // This is undefined
        {this.state.red}
        &lt;br /&gt;
        &lt;Slider ref="green" update={this.update}/&gt;
        {console.log(this.state.green)} // This is undefined
        {this.state.green}
        &lt;br /&gt;
        &lt;Slider ref="blue" update={this.update}/&gt;
        {console.log(this.state.blue)} // This is undefined
        {this.state.blue}
        &lt;br /&gt;
      &lt;/div&gt;
    )
  }
}

//Working with refs. Refs are a way of referencing components within our react application
class Slider extends React.Component {
  render() {
    return (
      &lt;div&gt;
        &lt;input ref="inp" type="range" min="0" max ="255" onChange={this.props.update}/&gt;
      &lt;/div&gt;
    )
  }
}

ReactDOM.render(
  &lt;App /&gt;, document.getElementById('app')
);

export default App;
</code></pre>