Не могу разобраться как толком менять состояние с помощью useState в ReactJS

Question

import React, {useState} from 'react';

export const App2 =()=>{

const data = {
    "tasks": [
    {
        "id": 0,
        "number": 0
    },
    {
        "id": 1,
        "number": 0
    },
    {
        "id": 2,
        "number": 0
    }
]
};

const [state, setState] = useState(data.tasks);

const appendOne = (target) =>{
    state.map(stateItem => {
        if (stateItem.id === target.id) {
            setState([...state, stateItem.number++])
        }
    });
};

return(
    <div>
        {state.map(item=> (
            <div className='main' key={item.id}>
            {/***********Значение**********/}
                <p>{item.number}</p>
            {/***********Кнопка меняющая значение**********/}
                <button onClick={()=> appendOne(item)}>Push</button>
            </div>
            )
        )}
    </div>
)

};

Есть кнопки, а рядом с ними их цифровые значения, хочу чтобы отдельная кнопка увеличивала своё значение на единицу. Она в принципе увеличивает, но при этом с каждым кликом добавляется новая кнопка, а мне это не надо. Что я не так делаю, подскажите пожалуйста?

Answer 1

Вы вместо того что бы менять нужный вам item, пушили новый в ваш массив

const data = {
  "tasks": [
    {
        "id": 0,
        "number": 0
    },
    {
        "id": 1,
        "number": 0
    },
    {
        "id": 2,
        "number": 0
    }
  ]
};

const [tasks, setTasks] = useState(data.tasks);

const IncTaskNumb = (index) =>{
  tasks[index].number = tasks[index].number + 1
  setTasks([...tasks])
};

return (
   <div>
    {tasks.map((item, index)=> (
        <div className='main' key={item.id}>
        {/***********Значение**********/}
            <p>{item.number}</p>
        {/***********Кнопка меняющая значение**********/}
            <button onClick={()=> IncTaskNumb(index)}>Push</button>
        </div>
        )
    )}
   </div>
)

БЛОГ НА HUSL

Не могу разобраться как толком менять состояние с помощью useState в ReactJS

Ответы (1 шт):