Estoy pasando una serie de objetos del archivo js externo al componente principal para renderizar:
const students = filteredStudents.map(i => <div key={i.id} className='d-flex border-bottom'> <img src={i.pic} className='align-self-center border rounded-circle mx-4' /> <div className='my-3'> <h2 className='fw-bold'>{i.firstName.toUpperCase()} {i.lastName.toUpperCase()}</h2> <div className='text-secondary ms-4'> <p className='mb-0'>Email: {i.email}</p> <p className='mb-0'>Company: {i.company}</p> <p className='mb-0'>Skill: {i.skill}</p> <p className='mb-0'>Average: {getAverageScore(i.grades)}%</p> <div className='mt-2 d-none'> {getGrades(i.grades)} </div> </div> </div> // Here is a + button </div> ); return students;representación del componente principal:
const items = renderStudents(this.state.query, this.state.students); return ( <div id='students-card' className='overflow-auto border shadow-lg'> <input className='w-100' placeholder='Search by name' onChange={this.handleChange} value={this.state.query} /> {items} // Array of objects being rendered here </div> ); Imagine que hay un botón en lugar de un comentario y cuando el usuario hace clic en él, se debe activar y desactivar d-none . Me quedé completamente atascado en esto. ¿Debería representar cada objeto de estudiante como un solo componente con su estado en lugar de hacerlo a mi manera?
Puede asignar una identificación y almacenarla en un estado local, usarla como identificador para el elemento seleccionado actual y puede hacer su lógica.
Compruebe el siguiente ejemplo
const [selectedGrade, setGrade] = React.useState(null) const [show, setShow] = React.useState(true) const handleHideShowGrade = (id) => { setGrade(id) setShow(!show) } const students = filteredStudents.map((i, idx) => <div key={i.id} className='d-flex border-bottom'> <img src={i.pic} className='align-self-center border rounded-circle mx-4' /> <div className='my-3'> <h2 className='fw-bold'>{i.firstName.toUpperCase()} {i.lastName.toUpperCase()}</h2> <div className='text-secondary ms-4'> <p className='mb-0'>Email: {i.email}</p> <p className='mb-0'>Company: {i.company}</p> <p className='mb-0'>Skill: {i.skill}</p> <p className='mb-0'>Average: {getAverageScore(i.grades)}%</p> <div className={`mt-2 ${selectedGrade === idx && show ? '' : 'd-none'}`}> {getGrades(i.grades)} </div> </div> </div> // Here is a + button <button onclick={() => handleHideShowGrade(idx)} </div> ); return students;