Caso não lembre como funciona o processo de entrega, clique aqui

Para o exercício de hoje, vamos utilizar um template!

Para executar este exercício, você pode criar uma nova aplicação React, utilizar o CodeSandbox ou usar este template do repositório.

• Caso use este template, lembre-se de dar um npm install assim que baixar!
• Caso estiver usando o codeSandBox, pode usar esse template aqui: https://codesandbox.io/s/fluxo-de-dados-feedback-jtuj5e

Caso queira criar uma nova aplicação React, basta copiar os conteúdos deste repositório e colar dentro da pasta do seu projeto criado.

Hoje vimos que o gerenciamento de estado precisa ser pensado de uma forma que seja possível compartilhar dados entre todos os componentes da nossa aplicação. Às vezes precisamos modificar toda a estrutura de estados para que seja possível resolver certos problemas de props, já que só podemos passar props de pai pra filho.

Nas práticas vocês conseguiram trabalhar essa movimentação do estado para um nível superior e agora vamos continuar exercitando essa lógica.

Vamos praticar uma análise mais crítica do aplicativo.
Desenhe a estrutura da árvore de componentes desse template. Quais componentes existem e como está a descendência de cada um?

Aqui está um exemplo aleatório:

Garanta que a edição dos campos do formulário reflitam nos valores do menu do perfil (menu lateral esquerdo).
Não se preocupe em implementar o uso do botão, faça tudo funcionar automaticamente por enquanto:

• digita no input, atualiza automaticamente o menu lateral

Agora que tudo está integrado, refatore e faça com que a atualização aconteça apenas quando o botão for clicado.

• Veja no exemplo abaixo o resultado final esperado: