title: How to convert jquery codes to reactjs
body: <p>Am building an application with Nodejs and reactjs.</p>
  
  <p>I have a <strong>Jquery</strong> code that I want to convert to <strong>Reactjs</strong> but am stucked some where</p>
  
  <p>Below is the Jquery Code that fetch data from nodejs backend and it works fine</p>
  
  <pre><code>//Update and get list of online users
  
  socket.on('onlineUsers', function (onlineUsers) {
    var usersList = '';
  
    onlineUsers.forEach(function (user) {
      if (user.id != myUser.id) {
  
        if (onlineUsers.length == 2) {
          myFriend.id = user.id;
          myFriend.name = user.name;
          $('#form').show();
          $('#messages').show();
        }
  
        var activeClass = (user.id == myFriend.id) ? 'active' : '';
        usersList += '&lt;li id="' + user.id + '" class="' + activeClass + '" onclick="selectUerChatBox(this, \'' + user.id + '\', \'' + user.name + '\')"&gt;&lt;a href="javascript:void(0)"&gt;' + user.name + '&lt;/a&gt;&lt;label class="chatNotificationCount"&gt; Good Job&lt;/label&gt;&lt;/li&gt;';
      }
    });
    $('#onlineUsers').html(usersList);
  });
  </code></pre>
  
  <p><strong>Here is where am stucked:</strong></p>
  
  <p>what is left to be converted to reactjs is the if function part of the code as per below</p>
  
  <pre><code>   if (user.id != myUser.id) {
            if (onlineUsers.length == 2) {
              myFriend.id = user.id;
              myFriend.name = user.name;
              $('#form').show();
              $('#messages').show();
            }
  
            var activeClass = (user.id == myFriend.id) ? 'active' : '';
            usersList += '&lt;li id="' + user.id + '" class="' + activeClass + '" onclick="selectUerChatBox(this, \'' + user.id + '\', \'' + user.name + '\')"&gt;&lt;a href="javascript:void(0)"&gt;' + user.name + '&lt;/a&gt;&lt;/li&gt;';
  
  
  }
  </code></pre>
  
  <p><strong>What I have achieved</strong></p>
  
  <p>Here is what I have achieved so far with reactjs. I can print the result in the render function via Reactjs. </p>
  
  <p>Please how do I achieve the if part to reactjs with the code below</p>
  
  <pre><code>import React, { Component, Fragment } from "react";
  import { render } from "react-dom";
  import axios from 'axios';
  import io from "socket.io-client";
  
  
  class ChatReact extends React.Component {
    constructor(props) {
      super(props);
  
   this.state = {
  getUsers: [],
  myUser: {},
  myFriend: {};
  };
  
   this.loginNow = this.loginNow.bind(this);
  
  this.socket = io('http://localhost:8080');
  
  var myUser= {};
  var myFriend = {};
  
  
  
  // Get current user information
  
  this.socket.on('newUser', (newUser) =&gt; {
    const myUser = newUser.name;
   //this.setState({myName: myUser.name});
  this.setState({myName: newUser.name});
  
  });
  
  
  // Update and get list of online users
          this.socket.on('onlineUsers', function(onlineUsers){
              var usersList = '';
              addonlineUsers(onlineUsers);
          });
  
          const addonlineUsers = onlineUsers =&gt; {
              console.log(onlineUsers);
              alert(onlineUsers);
              this.setState({getUsers: onlineUsers});
              console.log(this.state.getUsers);
          };
  }
  
  // Function to ask user to supply his/her name before entering a chatbox
  loginNow() {
    var person = prompt("Please enter your name:", "Nancy Moore");
  
      this.socket.emit('newUser', person);
  
  }
  
    render() {
      return (
        &lt;div &gt;
          &lt;div&gt;
  
  
  &lt;h1&gt; Testing Socket Io with Reactjs&lt;/h1&gt;
  
  
  &lt;button onClick={this.loginMe} className="btn btn-basic form-control"&gt;login&lt;/button&gt;
  
  &lt;br /&gt;
   &lt;div &gt;
  
  {this.state.getUsers.map((user) =&gt; {
  
            return (
              &lt;div key={user.id}&gt;
                &lt;div&gt;
  
  
  {user.id}------------- {user.name}
  &lt;br /&gt;
  
  &lt;/div&gt;
  
                &lt;/div&gt;
            )
          })}
                                  &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export { ChatReact };
  </code></pre>