title: How to dynamically update state in React.js?
body: <p>I want to dynamically update state <strong>CurrentIndex</strong> whenever I select a user.Right now I am hardcoding it to 0. I want to change that.<br/>
  <br/>I want to update currentIndex whenever I click on the list of users.
  <br/>SidePanel contains arrays of user and its outputting firstname,lastname</p>
  <pre><code>class Home extends Component {
    state = {  
      loadUsers: [],
      currentIndex: 0,
    };
  
    async componentDidMount() {
  
      const res = await axios.get(&quot;http://localhost:5000/users&quot;);
      this.setState({ loadUsers: res.data });
    }
  
    render() {
  
      return (
        &lt;Fragment&gt;
          &lt;div className=&quot;row&quot;&gt;
            &lt;div className=&quot;col-md-3&quot; style={{ backgroundColor: &quot;#303F9F&quot; }}&gt;
              &lt;Typography variant=&quot;h6&quot;&gt;List all Counsellors&lt;/Typography&gt;
              {this.state.loadUsers.map((user) =&gt; {
                const { _id, firstname, lastname } = user;
                return (
                  &lt;div key={_id}&gt;
                    &lt;SidePanel
                      id={_id}
                      firstname={firstname}
                      lastname={lastname}
                    /&gt;
                  &lt;/div&gt;
                );
              })}
            &lt;/div&gt;
            &lt;div className=&quot;col-md-4&quot;&gt;
              {this.state.loadUsers.length &gt; 1 &amp;&amp; (
                &lt;div&gt;
                  &lt;MiddlePanel
                    user={this.state.loadUsers[this.state.currentIndex]}
                  /&gt;
                &lt;/div&gt;
              )}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  </code></pre>