Manipulação e exibição de dados dinâmicos

Olá, alunos! No tópico anterior, aprendemos sobre o processo de renderização no React.

Aqui, vamos aprender sobre como manipular e exibir dados dinâmicos no React.

Dados dinâmicos são dados que podem mudar ao longo do tempo.

Por exemplo, uma lista de produtos ou um usuário logado são dados dinâmicos.

Para manipular e exibir dados dinâmicos no React, precisamos usar o state e o props.

State

O state é um objeto que armazena dados privados do componente.

Os dados do state podem ser modificados pelo componente, mas não podem ser acessados por outros componentes.

Para acessar o state, usamos a propriedade this.state.

Por exemplo, o seguinte código define um state para armazenar uma lista de produtos:

class MyComponent extends React.Component {
  state = {
    products: [
      {
        name: "Produto 1",
        price: 100,
      },
      {
        name: "Produto 2",
        price: 200,
      },
    ],
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.products.map((product) => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Este código renderiza uma lista de produtos na interface do usuário.

Os dados da lista de produtos são armazenados no state do componente MyComponent.

Props

Os props são dados que são passados para um componente de outro componente.

Os dados dos props podem ser acessados por qualquer componente que os receba.

Para acessar os props, usamos a propriedade this.props.

Por exemplo, o seguinte código define um componente que recebe uma lista de produtos como props:

const MyComponent = (props) => {
  return (
    <div>
      <ul>
        {props.products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

Este código renderiza uma lista de produtos na interface do usuário.

Os dados da lista de produtos são passados para o componente MyComponent como props.

No próximo módulo, vamos aprender sobre o JSX.

O JSX é uma extensão do JavaScript que permite escrever código HTML dentro de JavaScript.

O JSX torna a escrita de componentes React mais fácil e legível.

Espero que vocês estejam animados para aprender mais sobre o JSX!

Conclusão

No tópico de hoje, aprendemos sobre como manipular e exibir dados dinâmicos no React.

Aprendemos sobre o state e os props, que são duas maneiras de armazenar e acessar dados dinâmicos no React.

Espero que vocês tenham entendido como manipular e exibir dados dinâmicos no React.

Até lá, continuem estudando!