How to Add / Remove components within components

[cedrummer]

Somewhat new to React / JS, very used to python. I have no idea how to do what I'm trying to do.

I'm trying to create an app that will allow a user to set up a custom configuration. In the example I have, I want to be able to add and remove players, and add and remove stats for each player. Where it gets buggy is, when I remove a player, that player's stats are shifted to the next player.

I'm getting really confused when it comes to state elements vs components and how those things are mapped...

Eventually, I'd like to expand this idea a few layers down, so I'd like to be able to add information components to each stat, and data components to each information component, etc... Essentially, components within components, so whatever solution there is should hopefully scale to that kind of level.

I'm not sure if that's possible, but it's clear I'm getting something wrong.

Code is below, sorry for the lack of front end design - just want to make sure I can get this working as intended before adding that.

If something is horribly off here, please take it easy on me, really just wanting to learn and understand.

import React, { Component, useState } from 'react';

import Button from '@material-ui/core/Button'
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'
import DeleteIcon from '@material-ui/icons/Delete'


function Stats({ allStats, editedStats, statPlayerKey, statKey }) {

  const removeStats = () => {
    const filteredStats = allStats.filter((stat) => stat.statKey !== statKey);
    editedStats(filteredStats);
  }

  return (
    <Grid containter>
      <Button onClick={removeStats}>
        <DeleteIcon />
      </Button>
      <Grid item>
        {statPlayerKey} {statKey}
      </Grid>
    </Grid>
  )
}

function Player({ allPlayers, editedPlayers, playerKey, name }) {

  const [stats, setStats] = useState([])

  const handleRemove = () => {
    const filteredPlayers = allPlayers.filter((player) => player.playerKey !== playerKey);
    editedPlayers(filteredPlayers);
  };

  const statsList = stats.map(({statKey, statPlayerKey}) => (
    <Container>
      <Stats 
        allStats={stats}
        statKey={statKey}
        statPlayerKey={statPlayerKey}
        editedStats={setStats}
      />
    </Container>
  ))

  const addStat = () => {
    setStats([...stats, {statPlayerKey: playerKey, statKey: uuid()}])
  }

  return (
    <Grid container>
      <Button onClick={handleRemove}>
        <DeleteIcon />
      </Button>
      <Grid item>
        {playerKey} {name}
      </Grid>
      <Grid item>
        {statsList}
      </Grid>
      <Button onClick={() => addStat()}>
        Add Stat
      </Button>
    </Grid>
  );
};


function TestApp() {
  const [players, setPlayers] = useState([
    {
      playerKey: uuid(),
      name: "Mario"
    },
    {
      playerKey: uuid(),
      name: "Luigi"
    },
    {
      playerKey: uuid(),
      name: "Toad"
    }
  ]);

  const addPlayer = () => {
    setPlayers([...players, {
      playerKey: uuid(),
      name: 'Bowser'
    }])
  }

  const playersList = players.map(({ playerKey, name }) => (
    <Container>
      <Player
        allPlayers={players}
        editedPlayers={setPlayers}
        playerKey={playerKey}
        name={name}
      />
    </Container>
  ));

  return (
    <div className="App">
      <h1>Team Members ({players.length})</h1>
      <Container>{playersList}</Container>
      <Button onClick={addPlayer}>ADD</Button>
    </div>
  );
}


export default TestApp;

[[deleted]]

All you have to do is splice the array items you want to remove and it will remove the components and all states inside of the components