Manipulating buttons in React.js

Question

I am creating a small task system for a collaborator in the company where I work, it should display the tasks that must be completed on the day, until then I was able to display the tasks my problem appears when the collaborator is starting the task and finishing the task, I wonder if there is any way to change only the specific button of the task, the tasks are displayed from a map, I do not know if that is why. Follow the code:

const ServicosGerais: React.FC = () => {
    const [started, setStarted] = useState('Iniciar Tarefa')
    const [tasks, setTasks] = useState<TaskData[]>([]);
    const { signOut, user } = useAuth();

    useEffect(() => {
        api.get('/sistemas/tarefas').then((response) => {
            setTasks(response.data);

        });
    }, []);
  

    const startedtask = useCallback(() => {

        setStarted('Tarefa inciada');
    }, []);

    const finishtask = useCallback(() => {

        console.log('task finish!')

    }, []);


    return (
        <>
            <GlobalContainer>
                <Header />
                <Container>
                    <Headermini>
                        <h1>Olá {user.FIRSTNAME} essas são suas tarefas para hoje: <Moment format={"D MMM YYYY HH:mm:ss"} interval={1000}></Moment>  </h1>
                        <img src={"data:image/jpeg;base64, " + user.AVATAR} alt="" />
                    </Headermini>
                    <ContainerTarefa>
                        {tasks.map(task => (
                            <div className="tarefa" key={task.CODIGO_TAREFA}>
                                <p>{task.DEPARTAMENTO + ' - ' + task.DATA + '-' + task.NOME_DO_DIA}</p>
                                <p>{task.DESCRI_TAREFA}</p>
                                <div className="botoes">
                                    <ButtonStarted
                                        onClick={startedtask}>
                                        {started}</ButtonStarted>
                                    <ButtonFinish onClick={finishtask}>Finalizar Tarefa</ButtonFinish>
                                </div>
                            </div>
                        ))}
                    </ContainerTarefa>
                </Container>
                <Footer>
                    <nav className="navFooter">
                        <Link className="links" to="/menu"><BsHouseDoorFill size={25} />Menu</Link>
                        <Link className="links" to="/aplicacoes"><BsChevronDoubleLeft size={25} />Voltar</Link>
                        <Link className="links" to="/perfil"><BsFillPersonFill size={25} />Perfil</Link>
                        <button className="button" onClick={signOut}><BsBoxArrowLeft size={25} /> Sair </button>
                    </nav>
                </Footer>
            </GlobalContainer>
        </>
    );
}

export default ServicosGerais;

Then what happens and the following task list is displayed, as in the image below

the code snippet that performs this implementation would be below

 <ContainerTarefa>
                        {tasks.map(task => (
                            <div className="tarefa" key={task.CODIGO_TAREFA}>
                                <p>{task.DEPARTAMENTO + ' - ' + task.DATA + '-' + task.NOME_DO_DIA}</p>
                                <p>{task.DESCRI_TAREFA}</p>
                                <div className="botoes">
                                    <ButtonStarted
                                        onClick={startedtask}>
                                        {started}</ButtonStarted>
                                    <ButtonFinish onClick={finishtask}>Finalizar Tarefa</ButtonFinish>
                                </div>
                            </div>
                        ))}
                    </ContainerTarefa>

I would like the behavior of the buttons to be individual, because when I click on the button to start it all task are changed at the same time! In case your is displayed 6 tasks in day each task should be handled idividually!

Answer 1

I don’t know if I got it right, but in your case, I would treat each HTML element individually. I would put a parameter in the Finish task function, and pass the html element for each function call:

<ButtonStarted onClick={startedtask(task)}> {started} </ButtonStarted>
<ButtonFinish onClick={finishtask(task)}>Finalizar Tarefa</ButtonFinish>

So you’ll only have the current task inside the function, then you can manipulate it the way you want, create arrays and push the completed ones, anyway, anything.

A solution that I see there, assuming you have an array of tasks, and they have an ID, is the following, passing the parameter as I put it up there, changing your Started and finished functions to something like:

startedTask(task) {
    let tasks = this.state.Tasks;
    let x = 0;
    tasks.map(t => {
        if(task.id == t.id)
             // Fazer o que quiser com a tarefa **t** em questão
        x++;
    })
    this.setState({Tasks: tasks});

}

If changing the state inside the if, just use setState that takes the variable tasks at the end of the finished and Started functions

From the way I interpreted the problem, I was able to think of this solution, if it doesn’t help you answer me by explaining a little better.