Generate multiple array items for two different render calls

Question

I am building a web app that generates two teams (3 players for each team) from an array. I've been struggling with incorporating the general methods when it comes to displaying more than one for each team. At the moment it is only displaying one team member for each team taken from the array (I've tried the i++ method to no avail). Help would be appreciated.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
const myTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar 
Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];

const firstTeamRandom = myTeam[Math.floor(Math.random() * myTeam.length)];
const secondTeamRandom = myTeam[Math.floor(Math.random() * myTeam.length)];

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to Extreme Paintball!</h1>
    </header>
    <div>
      <p>{firstTeamRandom}</p>
    </div>
    <div>
      <p>{secondTeamRandom}</p>
    </div>
  </div>
  );
  }
  }

  export default App;

Thank you for all the help. I've implemented the following and it works; although when I apply a background state change on the buttons it executes the random team member name again for all the values... No idea on how to solve this since I can't seem to find the trigger...

import React, { Component } from 'react';
import './App.css';

const green = '#39D1B4';
const yellow = '#FFD712';

class App extends Component {
constructor(props){
super(props);
this.state = {color: green};
this.changeColor = this.changeColor.bind(this);
}
changeColor(){
const newColor = this.state.color == green ? yellow : green;
this.setState({ color: newColor });
}

render() {
const myTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar 
Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain 
Natalie', 'Dipak Iunia', 'Danel Mio'];
const firstTeam = [];
const secondTeam = [];

for (let i = 0; i < 3; i++) {
  const playerIndex = Math.floor(Math.random() * myTeam.length);
  firstTeam.push(myTeam[playerIndex]);
  myTeam.splice(playerIndex, 1);
}

for (let i = 0; i < 3; i++) {
  const playerIndex = Math.floor(Math.random() * myTeam.length);
  secondTeam.push(myTeam[playerIndex]);
  myTeam.splice(playerIndex, 1);
}

return (
  <div className="App">
    <div>
      <h3>First team</h3>
      <div>{firstTeam.map((player, key) => <div key={key}><button style=
{{background: this.state.color}} onClick={this.changeColor}>{player}
</button></div>)}</div>
    </div>
    <div>
      <h3>Second team</h3>
      <ul>{secondTeam.map((player, key) => <li key={key}><button style=
      {{background: this.state.color}} onClick={this.changeColor}>{player}
      </button></li>)}</ul>
    </div>
  </div>
);
}
}

export default App;

Answer 1

This code is working

import React, { Component } from 'react';

class App extends Component {
  render() {
    const myTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    const firstTeam = [];
    const secondTeam = [];

    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * myTeam.length);
      firstTeam.push(myTeam[playerIndex]);
      myTeam.splice(playerIndex, 1);
    }

    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * myTeam.length);
      secondTeam.push(myTeam[playerIndex]);
      myTeam.splice(playerIndex, 1);
    }

    return (
      <div className="App">
        <div>
          <h3>First team</h3>
          <ul>{firstTeam.map((player, key) => <li key={key}>{player}</li>)}</ul>
        </div>
        <div>
          <h3>Second team</h3>
          <ul>{secondTeam.map((player, key) => <li key={key}>{player}</li>)}</ul>
        </div>
      </div>
    );
  }
}

export default App;

Answer 2

This should solve the problem:

const myTeam = [
  'Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch',
  'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie',
  'Dipak Iunia', 'Danel Mio'
];

let remainingTeam = myTeam.slice();
let firstTeamRandom = [];
let secondTeamRandom = [];

for ( let i = 0; i < 3; i++ ) {
  let randomPlayer = remainingTeam[Math.floor(Math.random() * remainingTeam.length)];
  remainingTeam = remainingTeam.filter(player => player !== randomPlayer);
  firstTeamRandom.push(randomPlayer);
}

for ( let i = 0; i < 3; i++ ) {
  let randomPlayer = remainingTeam[Math.floor(Math.random() * remainingTeam.length)];
  remainingTeam = remainingTeam.filter(player => player !== randomPlayer);
  secondTeamRandom.push(randomPlayer);
}