title: How to pass data from render method to multiple components in React?
body: <p>I am new to React so looking like how can I render the data of image, name and user name from render method of one component to other components. </p>
  
  <pre><code> class Avatar extends React.Component {
      render() {
         return (
           &lt;img src={''} /&gt;
        )
     }
   }
  
  class Label extends React.Component {
    render() {
      return (
        &lt;h1&gt;Name: &lt;/h1&gt;
      )
    }
  }
  
  class ScreenName extends React.Component {
    render() {
      return (
        &lt;h3&gt;Username: &lt;/h3&gt;
      )
    }
  }
  
  class Badge extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Avatar /&gt;
          &lt;Label /&gt; 
          &lt;ScreenName /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>And the render method is this. How to read this image username and name into other components and update the view. Tried using {this.props.name} and also {this.props.user.name} but I am getting name as undefined. </p>
  
  <pre><code>ReactDOM.render(
    &lt;Badge user={{
      name: 'Tyler McGinnis',
      img: 'https://avatars0.githubusercontent.com/u/2933430?v=3&amp;s=460',
      username: 'tylermcginnis'
    }} /&gt;,
    document.getElementById('app')
  );
  </code></pre>
  
  <p>And the HTML is this</p>
  
  <pre><code>&lt;div id='app'&gt;&lt;/div&gt;
  </code></pre>