title: Cannot set multiple images
body: <p>I am getting buffered image/jpeg from backend. Parent component does setState every time a new image is received and is passed down to Child component.</p>
  
  <p>Child Component receives every update and can be seen in console logs, but it is only displaying single image.</p>
  
  <p><strong>Parent component:</strong></p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = { 
        nodeResponse: ''
    }
  }
  
  getFileStatusFromNode = (data) =&gt; {
      this.setState({nodeResponse: data})
    }
  
  render() {
  
  let CardView = nodeResponse !== '' &amp;&amp;
    &lt;Card key={nodeResponse.fileName} name={nodeResponse.fileName} image={nodeResponse.buffer} /&gt;
  
  
  return (
        &lt;div className="App tc"&gt;
           { CardView }
        &lt;/div&gt;
       )
     }
  }
  </code></pre>
  
  <p><strong>Child component:</strong></p>
  
  <pre><code>class Card extends PureComponent {
    constructor({props}) {
      super(props);
      this.state = { 
        src: '',
      };
  }
  
  componentDidMount() {
    console.log("Card mounted")
      this.setState(prevState =&gt; ({
          src: [this.props.image, ...prevState.src]
        }), () =&gt; console.log(this.state.src, this.props.name));
  }
  
  render() {
    const { name } = this.props;
    const { src } = this.state;
  
   return (
  
        &lt;a style={{width: 200, height: 250}} key={name} className={'tc'} &gt;
        &lt;div id='images'&gt;
        &lt;img style={{width: 175, height: 175}} className='tc' alt='missing' src={`data:image/jpeg;base64, ${src}`}/&gt;
        &lt;/div&gt;
        &lt;/a&gt; 
      )
    }
  }
  </code></pre>
  
  <p><strong>NOTE:</strong> These images are coming from socket io. I want to display them in real time rather than creating a list first and then display together.</p>