Add and remove button elements to and from array list

Question

I am building this dummy app whereby you choose teams from an array list of team members. I have all the results generated as buttons on screen so that you can add and remove team members from your team which takes them from and puts them back in the original list (Available Team Members). This functionality should work between (Available Team Members) and (Alpha Team Members) whereby the (Omega Team Members) are generated randomly.

My problem is that I can't seem to find a solution that works for adding and removing team members between the (Available Team Members) and (Alpha Team Members).

Help would be appreciated. Thank you in advance.

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

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

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

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

        return (
            <div className="App">
                <div>
                    <h3>Available Team Members</h3>
                    {AvailableTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>

                <div>
                    <h3>Alpha Team Members</h3>
                    {AlphaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>

                <div>
                    <h3>Omega Team Members</h3>
                   {OmegaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>
            </div>
        );
    }
}

export default App;

Answer 1

The state can be used as shown here . So give this a try:

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

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

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            AvailableTeam: ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'],
            AlphaTeam: [],
            Omegateam: []
        };
    }

    render() {
        for (let i = 0; i < 3; i++) {
            const playerIndex = Math.floor(Math.random() * this.state.AvailableTeam.length);
            // The state properties should be treated as immutable
            var tempOmega = this.state.OmegaTeam;
            var tempAvailable = this.state.AvailableTeam;

            tempOmega.push(tempAvailable[playerIndex]);
            this.setState({ Omegateam: tempOmega })

            tempAvailable.splice(playerIndex, 1);
            this.setState({ AvailableTeam: tempAvailable })
        }

        return (
            <div className="App">
                <div>
                    <h3>Available Team Members</h3>
                    {AvailableTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>

                <div>
                    <h3>Alpha Team Members</h3>
                    {AlphaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>

                <div>
                    <h3>Omega Team Members</h3>
                   {OmegaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>
            </div>
        );
    }
}

export default App;