Estados com Arrays e Objetos §

---

Estados com Arrays §

Ao utilizar arrays no estado de um componente de classe, é possível armazenar e manipular listas de elementos dinâmicos. Considere o seguinte exemplo de um componente que mantém uma lista de tarefas:

import React, { Component } from 'react';
 
class ListaDeTarefas extends Component {
  state = {
  tarefas: ['Estudar React', 'Fazer exercícios', 'Construir projetos'],
};
 
  render() {
    return (
      <ul>
        {this.state.tarefas.map((tarefa, index) => (
          <li key={index}>{tarefa}</li>
        ))}
      </ul>
    );
  }
}

No exemplo acima, o array tarefas é armazenado no estado do componente. Ao renderizar as tarefas, cada elemento é mapeado para um elemento de lista <li> e é importante fornecer um key único para cada item. O React usa a chave para otimizar o processo de atualizações, garantindo uma renderização eficiente.

Estados com objetos §

Ao utilizar objetos no estado, é possível armazenar dados estruturados, como informações de formulários ou detalhes de um item. Vejamos um exemplo de um componente que mantém informações de um usuário:

import React, { Component } from 'react';
 
class DetalhesDoUsuario extends Component {
	state = {
		usuario: {
			nome: 'João',
			idade: 25,
			cidade: 'Exemploville',
		},
	};
 
	render() {
		const { nome, idade, cidade } = this.state.usuario;
		return (
		  <div>
			<p>Nome: {nome}</p>
			<p>Idade: {idade}</p>
			<p>Cidade: {cidade}</p>
		  </div>
		);
	}
}

Neste exemplo, o estado contém um objeto usuario com informações específicas. Ao renderizar, desestruturamos o objeto para acessar os dados individuais.

Identificadores únicos §

Quando renderizamos listas de elementos no React, cada item deve ter um identificador único. Este identificador é crucial para que o React possa identificar alterações específicas e otimizar o processo de atualização do DOM. No exemplo do array de tarefas, o key é utilizado para fornecer identificadores únicos para cada item.

A escolha adequada de um identificador depende do contexto do aplicativo. Para dados provenientes de uma API, um identificador único da API pode ser apropriado. Se os dados são estáticos ou gerados dinamicamente, um índice pode ser usado, mas é preferível utilizar identificadores únicos estáveis sempre que possível.

Ao manipular estados com arrays e objetos em componentes de classe no React, garantir identificadores únicos e compreender a importância de chaves é essencial para uma renderização eficiente e uma experiência de usuário sem problemas.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)