Finding key in array

Question

Take a look on "this.state.winners":

import React, { Component } from "react";

const playingPlayers = [
    {uid: 1, name: 'John'},
    {uid: 2, name: 'Emperor'},
    {uid: 3, name: 'King'}
];

class Queue extends Component {
    constructor(props) {
        super(props);
        this.state = {
          winners: this.props.winners // here is winner players
        }
    }
    addPlayer(player){
        return (
            <div>
                <li>{player.name}</li>
            </div>
        );
    }
    render(){
        return (
            <React.Fragment>
                {playingPlayers.map(player => this.addPlayer(player))}
            </React.Fragment>
        );
    }
}

export default Queue;

Example results:

John
Emperor
King

uid 2 and uid 3 is winner on my array (this.props.winners)

Now, for example, I would like to mark or highlight uid 2 and 3 in the list above.

For example, like this result:

John
Emperor (is winner)
King  (is winner)

How can i do ? how can mark this winners without rebuilding list ?

Also you can see my example in here:

https://stackblitz.com/edit/react-ab4nia?file=index.js

Sunil Lama · Accepted Answer · 2020-03-08 02:40:36Z

3

change your addPlayer(player) function to check if the player is winner as below:

addPlayer(player){
      var listItem,isWinner;
      isWinner = this.props.winners.some(data=>data.uid===player.uid);
        if (isWinner) {
          listItem = <li>{player.name}(is winner)</li>;
        } else {
          listItem= <li>{player.name}</li>
        }
        return (
            <div>
                {listItem}
            </div>
        );
    }

Check it on stackblitz: https://stackblitz.com/edit/react-plyqf5

edited Mar 8, 2020 at 2:40

answered Mar 8, 2020 at 2:38

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kip Over a year ago

I would use uid instead of name

Sunil Lama Over a year ago

@kip, it was just a hint for him to get it going, but changed it to uid just in case assuming his uid is unique

Carolina Ramirez Over a year ago

Yes, I was looking for exactly this code! that was perfect. thanks sir

Shyam Sedai · Accepted Answer · 2020-03-08 02:56:37Z

Here you go:

import React, { Component } from "react";

const playingPlayers = [
    {uid: 1, name: 'John'},
    {uid: 2, name: 'Emperor'},
    {uid: 3, name: 'King'}
];

class Queue extends Component {
    constructor(props) {
        super(props);
        this.state = {
          winners: this.props.winners
        }
    }
    checkWinner(uid){
      var status = '';
      for (let winner of this.state.winners) {
        if (winner.uid === uid) {
          status = '(winner)'; //change whatever message you want here
          break;
          }

      }
      return status;
    }
    addPlayer(player){
        return (
            <div>
                <li>{player.name} {this.checkWinner(player.uid)}</li>
            </div>
        );
    }
    render(){
        return (
            <React.Fragment>
                {playingPlayers.map(player => 
                  this.addPlayer(player)

                  )
                }
            </React.Fragment>
        );
    }
}

export default Queue;

Ugur Yilmaz · Accepted Answer · 2020-03-08 03:04:18Z

1

You can basically check uuids to compare who the winners are. Here is the link that you can check running demo, I made the winner in a bold format for you to see, you can change logic to anything you want https://react-7sd9h7.stackblitz.io

import React, { Component } from "react";

const playingPlayers = [
  { uid: 1, name: "John" },
  { uid: 2, name: "Emperor" },
  { uid: 3, name: "King" }
];

class Queue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      winners_id: this.props.winners.map(winner => winner.uid) // here is winner players
    };
  }
  addPlayer(player) {
    return (
      <div key={player.uid}>
        {this.state.winners_id.includes(player.uid) ? (
          <li style={{ fontWeight: "bold" }}>{player.name}</li>
        ) : (
          <li>{player.name}</li>
        )}
      </div>
    );
  }
  render() {
    return (
      <React.Fragment>
        {playingPlayers.map(player => this.addPlayer(player))}
      </React.Fragment>
    );
  }
}

export default Queue;

answered Mar 8, 2020 at 3:04

Ugur Yilmaz

5298 silver badges18 bronze badges

1 Comment

Ugur Yilmaz Over a year ago

No problem. Please upvote if you think the answer could be useful for others @CarolinaRamirez

Siva Kondapi Venkata · Accepted Answer · 2020-03-08 07:07:42Z

0

Add the winner check in addPlayer method and do the conditional display of string. (similarly you can do with styles).

function addPlayer(player) {
  const winners = [2, 3];
  return (
    <div>
      <li>{`${player.name}${
        winners.includes(player.uid) ? " (is Winner)" : ""
      }`}</li>
    </div>
  );
}

answered Mar 8, 2020 at 7:07

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Finding key in array

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related