[Sugestão] Resumo da aula

Nesta aula, você aprendeu a tornar a lista de tarefas dinâmica utilizando o useState em React, o que permite adicionar novas tarefas de forma reativa.

Passos para Dinamização da Lista

1. Transformar Constante em Variável:

• Mudança da lista de tarefas de constante para variável:

function Lista() {
    let tarefas = [{
        tarefa: 'React',
        tempo: '02:00:00'
    }, {
        tarefa: 'JavaScript',
        tempo: '01:00:00'
    }, {
        tarefa: 'TypeScript',
        tempo: '03:00:00'
    }];
}

1. Adicionar Novo Item ao Clicar:

• Utilização da propriedade onClick em um elemento para adicionar uma nova tarefa à lista:

<h2 onClick={() => {
    tarefas = [...tarefas, { tarefa: "Estudar estado", tempo: "05:00:00" }];
}}>Adicionar Tarefa</h2>

1. Problema de Renderização Reativa:

• O React não atualiza automaticamente a renderização quando a lista é modificada diretamente. Para que o React saiba que precisa atualizar, é necessário usar o state.

1. Uso do useState:

• Introdução do useState para gerenciar o estado da lista de tarefas:

import React, { useState } from 'react';

function Lista() {
    const [tarefas, setTarefas] = useState([{
        tarefa: 'React',
        tempo: '02:00:00'
    }, {
        tarefa: 'JavaScript',
        tempo: '01:00:00'
    }, {
        tarefa: 'TypeScript',
        tempo: '03:00:00'
    }]);
}

1. Atualização do Estado ao Clicar:

• Utilização da função setTarefas para atualizar o estado e garantir que o React reaja à mudança:

<h2 onClick={() => {
    setTarefas([...tarefas, { tarefa: "Estudar estado", tempo: "05:00:00" }]);
}}>Adicionar Tarefa</h2>

Benefícios do useState

• O useState permite que o React monitore e reaja às mudanças no estado.
• Utilizando setTarefas, o React atualiza automaticamente a renderização do componente quando o estado é alterado.