ReactJS, function for adding/subtracting number doesn't run inside my const-CodePudding

I am creating a game counter in reactJS. I currently have it so you're able to add a player name into an input, and that creates a list below. For every player I need to add a number with and - buttons.

The functions I have created minusCount plusCount work perfectly fine when placed inside the App function. However, as I need a seperate counter for each player; I am trying to add the function inside const List as this will add a new counter to every player added.

The problem I am having is that the minusCount and plusCount functions are coming back as undefined when placed inside here and the count variable is just empty.

Any help is greatly appreciated!

import React, {useState} from 'react';
import { v4 as uuidv4 } from 'uuid';
import './sass/style.scss';

const initialList = [];

const listReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        state,
        list: state.list.concat({ number: action.number, name: action.name, id: action.id }),
      };
    default:
      throw new Error();
  }
};

export default function App() {
  let [count, setCount] = useState(6);

  const [listData, dispatchListData] = React.useReducer(listReducer, {
    list: initialList,
    isShowList: true,
  });
  const [name, setName] = React.useState('');
  const [number, setNumber] = React.useState('');

  //
  // Handle adding players to the game
  function handleChange(event) {
    setName(event.target.value);
  }
  function handleNumber(event) {
    setNumber(event.target.value);
  }
  function handleAdd() {
    dispatchListData({ type: 'ADD_ITEM', name, number, id: uuidv4() });
    setName('');
    setNumber('');
  }

  // THESE FUNCTIONS HAVE ERRORS
  // Handle adding/subtracting lives
  function minusCount() {
    count = count - 1;
    setCount(count);
  }
  function plusCount() {
    count = count   1;
    setCount(count);
  }

  //
  // Frontend output
  return (
    <section className="player-list">
      <AddItem
        name={name}
        number={number}
        onChange={handleChange}
        onNumber={handleNumber}
        onAdd={handleAdd}
      />
      <div className="player-information">
        <List list={listData.list} />
      </div>
    </section>
  );
};

//
// Handle adding players to the game
const AddItem = ({ number, name, onChange, onNumber, onAdd }) => (
  <form>
    <input type="text" value={name} onChange={onChange} />
    <input type="number" value={number} onChange={onNumber} min="1" max="20" />
    <button type="button" onClick={onAdd}>
      Add
    </button>
  </form>
);

// TRYING TO ADD COUNTER HERE
// Display list of players
const List = ({ list, minusCount, plusCount, count }) => (
  <div className="player-list">
    <div className="player-list-wrapper">
      {list.map((item) => (
        <div className="player">
          <p key={item.id}><b>{item.name}</b><span>{item.number}</span></p>

          // This section doesn't work
          <div className="player-lives">
            <button onClick={minusCount}>-</button>
            <p>{count}</p>
            <button onClick={plusCount}> </button>
          </div>
          // End This section doesn't work

        </div>
      ))}
    </div>
  </div>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

CodePudding user response：

You should send the prop to List component

You have defined your List component with this props

const List = ({ list, minusCount, plusCount, count }) => (

So you have to pass these props on your Frontend output

  // Frontend output
  return (
    <section className="player-list">
      <AddItem
        name={name}
        number={number}
        onChange={handleChange}
        onNumber={handleNumber}
        onAdd={handleAdd}
      />
      <div className="player-information">
        <List list={listData.list}
          minusCount={minusCount}
          plusCount={plusCount}
          count={count}
        />
      </div>
    </section>
  );