How do I dynamically create options for a ReactJs dropdown menu?
<p>I'm trying to update an existing React select (dropdown) to contain all of the users currently on a server. I have an array of all of the users on the server, I just can't get my dropdown to update when the array does.</p>

<p>Here is my code:</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>class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    socket.emit('join', {room: this.state.value});
    this.setState({value: event.target.value});
    alert('People on server: ' + this.state.value);
    event.preventDefault();
  }

  handleSubmit(event) {
    //not really using this
    event.preventDefault();
  }
  

  render() {
    return (
      &lt;form onChange={this.handleChange}&gt;
        &lt;label&gt;
          Pick your favorite La Croix flavor:
          &lt;select id="userlist" value={this.state.value} onChange={this.handleChange}&gt;
            {this.props.list.map((name) =&gt; &lt;option&gt;{name}&lt;/option&gt;)}
          &lt;/select&gt;
        &lt;/label&gt;
        
      &lt;/form&gt;
    );
  }
}


class Login extends React.Component {
  render() {
    return (
      &lt;div className="login"&gt;
          &lt;NameForm /&gt;
          &lt;UserList list={users} /&gt;
          &lt;Chat /&gt;
          &lt;ChatInput /&gt;
      &lt;/div&gt;
    );
  }
}</code></pre>
</div>
</div>
</p>

<p>I'm very new to React, and I don't understand how to get elements to update via external request (in this case a server). Right now, my javascript stores the list of people on the server in an array called 'users' that is updated by the server. I would like the dropdown to update whenever the array does.</p>

<p>EDIT:</p>

<p>Here is the code that populates the users array:</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>socket.on('update_list', function(msg) {
  users.push(msg.data);
});</code></pre>
</div>
</div>
</p>

<p>The users array is definitely updated after the server calls 'update_list'. I have printed the values in users after that is called, and when a new user logs on, users does update accordingly.</p>