title: Syntax to change image source based on states and props in react
body: <p>I have a parent component that contains a child component:</p>
  
  <pre><code>return(
    &lt;ChildComponent state={this.getState} /&gt;
  );
  </code></pre>
  
  <p>Inside m child component:</p>
  
  <pre><code>return(
    &lt;Avatar src="./picture" /&gt;
  );
  </code></pre>
  
  <p>I want to change the source based on the state of the parent. For example if the state of the parent was 1 i the source will be picture1 or if the state was 2 the source would be picture2 and if the state was 3 it would be picture 3. I'm not sure what the syntax would be to complete the child's image source. Would it be something like this:</p>
  
  <pre><code>&lt;Avatar src="'./picture' + this.props.state + '.jpg'"/&gt;
  </code></pre>
  
  <p>EDIT: just wanted to make it clear I am using a material UI component called avatar. (changed img to avatar) Documentation: <a href="http://www.material-ui.com/#/components/avatar" rel="nofollow">http://www.material-ui.com/#/components/avatar</a></p>