Why Reactjs is displaying all the Users Fullname at a time

Question

I am trying to display each user's record based on user's button click.

The Checking condition is that if Users status is true display result on button click. If False remove result on button click.

Here is my issue, if just click on just one user, instead of displaying that users particular fullname, it will just display all the fullname of all the users. I think the Id of the Users is conflicting.

I need to get user's fullname displayed for that user one after another based on Id.

Here is the code

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
    };
  }


  componentDidMount() {
    this.setState({
      arr: [
    {   userid:1, username: "user1", fullname: "James Moon",    Status: false},
    {   userid:2, username: "user2", fullname: "Bebeto Carlos", Status: false},
    {   userid:3, username: "user3", fullname: "John snow",     Status: false},
    {   userid:4, username: "user4", fullname: "Michael Owen",  Status: false}
      ]
    });

  }


// Check if Users status is true display result on button click. If False remove result on button click.
checkUserStatus = (id) => {
//checkUserStatus = function(id) {

if (this.state.arr[0].Status == true) {
    this.state.arr[0].Status = false;
 this.setState({checkstate: this.state.arr[0].Status});

    } else {
     this.state.arr[0].Status = true;
 this.setState({checkstate: this.state.arr[0].Status});
    }
  }



  render() {
const {id} = this.state;
    return (
      <span>
        <label>
          <ul>


            {this.state.arr.map((user, index) => (
           
<li key={index} onClick={() => this.checkUserStatus(this, index)}>
                {user.username}
                <br />

              </li>
            ))}




{this.state.arr.map((stat, index) => {

//this.state.arr.filter();
//this.state.arr.find();

if (this.state.checkstate == true) {

          return (
            <div key={index}>
       <div  >       
 {stat.Status}: {stat.fullname} 
            </div>
              </div>
          )


  }
        })}

          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

With my understanding, you need to do this : When a user is clicked, the fullname will be displayed and when the user clicks again on the same element, the fullname will be hidden. Is this you need, the below procedure is have to be followed.

class App extends Component {
  constructor() {
    super();
    this.state = {
      arr: [],
    };
  }
   componentDidMount() {
    this.setState({
      arr: [
        {   userid:1, username: "user1", fullname: "James Moon",    Status: false},
        {   userid:2, username: "user2", fullname: "Bebeto Carlos", Status: false},
        {   userid:3, username: "user3", fullname: "John snow",     Status: false},
        {   userid:4, username: "user4", fullname: "Michael Owen",  Status: false}
      ]
    });

  }

checkUserStatus = (e) => {
  const id = e.target.dataset.id;
  let arrClone = this.state.arr.map(item => ({...item}) ); 
  arrClone.filter(ele => ele.userid === parseInt(id) ? ele.Status =  ele.Status ? !ele.Status : true :  ele.Status = false)
  this.setState({ arr: arrClone });
}


 render() {
    return (
      <span>
        <label>
          <ul>
            {this.state.arr.map((user, index) => (
              <li key={user.userid} data-id={user.userid} onClick={this.checkUserStatus}>
                {user.username}
                <br />
              </li>
            ))}
            {this.state.arr.map((stat, index) => {
              return (
                stat.Status ? // show only status true item
                <div key={index}>
                    <div  >       
                        <span> {stat.username}: {stat.fullname} </span>
                </div>
                  </div> : null
              )
            })}
          </ul>
        </label>
      </span>
    );
  }
}

demo code Hope this helps.

Answer 2

As I under stand that you want to display full name of user for which user you click the button.

For this you can create one function to handle current user.

   this.state = {
          currentUser: {
            fullname:''
                       }
            };

you can modify this

    {this.state.arr.map((user, index) => (
<li key={index} onClick={() => this.handleCurrentUser(this, user)}>
                {user.username}
                <br />
              </li>
            ))}

After that create a function

handleCurrentUser(this, user) {
    this.state.currentUser = user;
    this.setState({currentUser: this.state.currentUser})
}

Now you can render using

     return (
            <div key={index}>
       <div  >       
 {this.state.currentUser.fullname} 
            </div>
              </div>
          )

Hope this helps.