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
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!
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!
– Vinicius Lima
@Viniciuslima tranquil, any doubt or error sends a reply here that I try to understand!
– placementw
@Viniciuslima may be that you have to use a bind at the time that calls the function also if that way does not work
– placementw