Manipulating buttons in React.js

Asked

Viewed 511 times

0

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 Imagem de uma tarefa do sistema

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!

1 answer

0


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.

  • Fala @placementw, cara sua logica foi muito boa I’ll try to use here, if it works I’ll come back to give you a feedback! Thanks a lot for your attention!

  • @Viniciuslima tranquil, any doubt or error sends a reply here that I try to understand!

  • @Viniciuslima may be that you have to use a bind at the time that calls the function also if that way does not work

Browser other questions tagged

You are not signed in. Login or sign up in order to post.