Key Prop
KeyProp
Em uma listagem, normalmente utilizamos o map()
do JavaScript para trazer todos os dados dessa lista. No React, precisamos passar uma propriedade key
para que esse dado nunca se repita e evitar que erros desse tipo aconteçam.
Para evitar esse tipo de erro, passamos a prop Key,
veja o exemplo:
import React, { useState } from "react"; import "./styles.css"; import { Card } from "../../components/Card"; export function Home() { const [studentName, setStudentName] = useState(""); const [students, setStudents] = useState([]); function handleAddStudent() { const newStudent = { name: studentName, time: new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit", second: "2-digit", }), }; setStudents((prevState) => [...prevState, newStudent]); } return ( <div className="container"> <h1>Lista de Presença</h1> <input type="text" placeholder="Digite o nome..." onChange={(e) => setStudentName(e.target.value)} /> <button type="button" onClick={handleAddStudent}> Adicionar </button> {students.map((student) => ( <Card key={student.time} name={student.name} time={student.time} /> ))} </div> ); }
Links úteis
Discord
O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.
Plataforma
Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.