CODEWITHSUNDEEP
javascriptarraysreactjs
Ruan Petersen
Ruan Petersen

Reputation: 151

React.js: Toggle Buttons with children and parents

I have an [Available Team] array that populates under (Available Team Members) as buttons. I would like that when one is clicked that it generates a child button under (Alpha Team Members) with the same name of the parent. When the same parent is clicked again I would like the child to be removed from (Alpha Team Members). (Omega Team Members) are randomly generated.

My problem is that the click handlers complete this function for all the buttons at once and not just the one clicked and when clicked it shuffles the randomly generated (Omega Team Members) which it should not do... Help would be appreciated. Thank you in advance.

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

class App extends Component {

  constructor() {
    super();
    this.state = { show: false };
  }

  handleClick() {
    this.setState({
      show: !this.state.show
    });
  }

  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 onClick={ () => this.handleClick() }>{player}</button></div>)}
          <button onClick={ () => this.handleClick() }>Benzo Walli</button>
        </div>

        <div>
          <h3>Alpha Team Members</h3>
          <ToggleDisplay show={this.state.show}>
            <div><button></button></div>
          </ToggleDisplay>
        </div>

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

export default App;

I've tried a solution using handles but they trigger all of the buttons when more than one is used. Could I fix this using keys and if yes how?

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  handleClick() {
    this.setState({
      show: !this.state.show
    });
  }

  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>
          <button onClick={ () => this.handleClick() }>Benzo Walli</button>
          <button onClick={ () => this.handleClick() }>Ruan</button>
        </div>

        <div>
          <h3>Alpha Team Members</h3>
          <ToggleDisplay show={this.state.show}>
            <div><button>Benzo Walli</button></div>
          </ToggleDisplay>
          <ToggleDisplay show={this.state.show}>
            <div><button>Ruan</button></div>
          </ToggleDisplay>
        </div>

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

export default App;

Upvotes: 1

Views: 1266

Answers (2)

NickG
NickG

Reputation: 601

I hope i understood you correctly, so here my solution:

Your logic for a dynamic display of the player buttons is missing, you just toggle the buttons on and off. Your handleClick function does not work differently based on which player button you click.

Therefore you have to pass a parameter to the handleClick, i'd suggest the player. Then you need to push each player you want to display in your alphaTeam array. That array has to be displayed in a loop aswell (presumably if you want to display more than one player there).

For the shuffle part, your handleClick function sets the state for your App Component, what causes React to rerender the App, therefore shuffling your OmegaTeam again. You should consider moving the shuffle as well as the initalization of your AvailableTeam in the constructor / state.

Here my suggestions, i didn't test it though:

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

class App extends Component {

  constructor() {
    super();
    let availableTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    let omegaTeam = [];
    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * availableTeam.length);
      omegaTeam.push(availableTeam[playerIndex]);
      availableTeam.splice(playerIndex, 1);
    }
    this.state = {
     availableTeam : availableTeam,
     alphaTeam : [],
     omegaTeam : omegaTeam,
    };
  }

  handleClick(player) {
    let newAlphaTeam = this.state.alphaTeam;
    // if player is not in array , add him
    if(newAlphaTeam.indexOf(player)<0){
        newAlphaTeam.push(player);
    }
    // if player is in the array , remove him
    else{
      newAlphaTeam.splice(newAlphaTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      alphaTeam : newAlphaTeam,
    });
  }

  render() {

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          {this.state.availableTeam.map((player, key) => <div key={key}><button onClick={ () => this.handleClick(player) }>{player}</button></div>)}
        </div>

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

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

export default App;

Upvotes: 2

Ruan Petersen
Ruan Petersen

Reputation: 151

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

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

class App extends Component {

  constructor() {
    super();
    this.state = {color: green};
    this.changeColor = this.changeColor.bind(this);

    let availableTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    let alphaTeam = [];
    let omegaTeam = [];
    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * availableTeam.length);
      omegaTeam.push(availableTeam[playerIndex]);
      availableTeam.splice(playerIndex, 1);
    }
    this.state = {
     availableTeam : availableTeam,
     alphaTeam : [],
     omegaTeam : omegaTeam,
    };
  }

  handleClick(player) {
    let newAlphaTeam = this.state.alphaTeam;
    // if player is not in array , add him
    if(newAlphaTeam.indexOf(player)<0){
        newAlphaTeam.push(player);
    }
    // if player is in the array , remove him
    else{
      newAlphaTeam.splice(newAlphaTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      alphaTeam : newAlphaTeam,
    });
  }

  changeColor(){
    const newColor = this.state.color === green ? yellow : green;
    this.setState({ color: newColor });
  }

  render() {

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          {this.state.availableTeam.map((player, key) => <div key={key}><button style={{background: this.state.color}} onClick={this.changeColor, () => this.handleClick(player) }>{player}</button></div>)}
        </div>

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

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

export default App;

Upvotes: 0

Related Questions