Duvida em criação de componente

[felipevc13]

Fala pessoal blz?
Sou novo na área e estou fazendo alguns estudos criando um app de alimentação para o meu cachorro.

Eu tenho um componente que vai ter 3 estados:

Estado inicial: O componente quando não tem nenhum item vindo do banco de dados ele vai ter uma mensagem.

Estado de edição: O componente vai adicionar, editar e excluir itens.

Estado com dados: Estado onde os itens aparecem em uma tabela.

A pergunta é, como vocês fariam a separação desse componente e quais argumentos passariam para ele?

Estou usando o Gatsby + Strapi e Graphql para pegar os dados.

Qualquer dica é bem vinda.

Muito Obrigado.

[victorferreira]

Como no seu caso você está sempre editando a lista inteira, você pode fazer algo como:

function Index() {
  const [list, setList] = useState([]);
  const [isEditing, setIsEditing] = useState(false);

  if (isEditing) {
    return <EditForm list={list} />;
  }

  if (!list.length) {
    return <EmptyList onUpdate={setList} openEditForm={setIsEditing} />;
  }

  return (
    <PopulatedList list={list} onUpdate={setList} openEditForm={setIsEditing} />
  );
}

[felipevc13]

muito obrigado pela resposta, me ajudou muito.