title: How to re-render a component when receiveing data from socket.io?
body: <p>I'm trying to build a realtime multiplayer game with React and socket.io, so when the user is logged in i pass his name in an array on server side with socket.io and then the game component shows up and i map the array to display all players name.</p>
  
  <p>So, first player logs in, his name is shown on his window, second player logs in then gets his name + the first player name on his window, but the window of the first player doesnt update to show the second player that logged after him.</p>
  
  <p>Any idea on how to trigger a render on the component when data is received from socket.io ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { Button } from 'semantic-ui-react'
  import socket from '../api'
  
  class connectedUsers extends Component {
    constructor(props) {
      super(props)
  
      this.state = {players : []}
    }
  
    handleData = (data) =&gt; {
      this.setState({players: data})
      console.log('handleData ' + data);
    }
  
    componentDidMount() {
      socket.on('playerList', this.handleData)
    }
  
    render() {
      console.log('render ' + this.state.players);
      return(
        &lt;div&gt;
          {this.state.players.map(player =&gt;
            &lt;Button basic color='violet' key={player}&gt;{player}&lt;/Button&gt;
          )}
        &lt;/div&gt;
      )
    }
  
  }
  
  export default connectedUsers</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import openSocket from 'socket.io-client'
  
  const socket = openSocket('http://localhost:3001')
  
  export default socket</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = function (io) {
    let players = []
  
    io.on('connection', socket =&gt; {
  
  
      socket.on('playerConnected', (player) =&gt; {
  
        players.push(player)
  
        socket.emit('playerList', players)
      })
  
      socket.on('disconnect', () =&gt; {
  
         console.log('user disconnected')
       })
    })
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { Form, Message } from 'semantic-ui-react'
  import { Redirect } from 'react-router-dom'
  import socket from '../api'
  
  class PseudoForm extends Component {
    state = { name: '', pseudoDispo: false, pseudoValide: true, pseudoNonDispo: false}
  
    handleChange = (e, { name, value }) =&gt; this.setState({ [name]: value })
  
    handleSubmit = (e) =&gt; {
      e.preventDefault()
  
      const { name } = this.state
  
  
      this.setState({pseudoDispo: false})
      this.setState({pseudoNonDispo: false})
  
      if(name.length &gt; 3) {
        this.setState({pseudoValide: true})
  
        fetch('/postpseudo', {
          method: "POST",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({pseudo: name})
        })
          .then(res =&gt; res.json())
          .then(data =&gt; {
            if(data.pseudoDispo) {
              this.setState({pseudoDispo: data.pseudoDispo})
              socket.emit('playerConnected', name)
            } else {
              this.setState({pseudoNonDispo: true})
              }
            })
          .catch(error =&gt; console.error(error))
  
  
      } else {
        this.setState({pseudoValide: false})
      }
    }
  
    render() {
      const { name } = this.state
      const redirectToGame = this.state.pseudoDispo ? &lt;Redirect to={{pathname: '/game'}} /&gt; : true
      return(
        &lt;div&gt;
          {redirectToGame}
            &lt;Form
              success={this.state.pseudoDispo}
              error={this.state.pseudoNonDispo}
              warning={!this.state.pseudoValide}
              onSubmit={this.handleSubmit}
            &gt;
              &lt;Form.Input
                placeholder="Pseudo"
                name="name"
                width={4}
                value={name}
                onChange={this.handleChange}
              /&gt;
              &lt;Message
                success
                header='Pseudo Disponible'
              /&gt;
              &lt;Message
                error
                header='Pseudo déja pris'
              /&gt;
              &lt;Message
                warning
                header='Le pseudo est trop court'
  
              /&gt;
              &lt;Form.Button primary &gt;Envoyer&lt;/Form.Button&gt;
            &lt;/Form&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default PseudoForm</code></pre>
  </div>
  </div>
  </p>