Tengo este objeto de objetos:
[ 0: { id: 0, name: 'Bob', children: [ 0: { id: 0, parent: 'Bob', 'name': 'Susan'}, 1: { id: 1, parent: 'Bob', 'name': 'David'}, ] }, 1: { id: 1, name: 'Christine', children: [ 0: { id: 0, parent: 'Christine', 'name': 'Iker'}, 1: { id: 1, parent: 'Christine', 'name': 'Ray'}, 2: { id: 2, parent: 'Christine', 'name': 'Milo'}, ] }, ]Tengo una lista que representa a todos los niños y tengo un onClick en ellos. ¿Cómo puedo obtener el índice del objeto del padre cuando hago clic en los hijos individuales? Lo que tengo a continuación solo devuelve el índice del niño en sí.
<div onClick={() => handleAddChild(id, index)}> <p>{child.name}</p> </div>Básicamente, cuando hago clic en un elemento secundario, quiero obtener el índice del objeto principal de ese elemento secundario para actualizar la lista de elementos secundarios de ese elemento principal en particular mediante setState(). Entonces, si hago clic en Iker, debería recuperar el índice 1 del objeto de Christine y luego actualizar el estado usando este método (pero el mío es dinámico): https://stackoverflow.com/a/49502115/10211209 . ¿Hay otra forma de hacer esto haciendo coincidir la propiedad del nombre principal?
¡Gracias!
Si está recorriendo y representando primero a los padres y luego a los niños. Simplemente puede pasar el índice principal como un parámetro adicional. p.ej
return this.parents.map((item, parentIndex) => ( <span className="parent" key={index}> {item.children.map((child, index) => { <div onClick={() => handleAddChild(child.id, index, parentIndex)}> <p>{child.name}</p> </div> })} </span> ));