title: Using refs to access components in React
body: <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>