Intento hacer un mapa en React js con un botón, si hago clic en un botón, cambiaría el texto, pero cuando hago clic en el botón, cambia todo el botón.
Sé que el problema es que no especifiqué el button_id, pero no tengo idea de cómo obtenerlo.
Ahí está mi código:
const assignTutorToChildFunction = (id_child) => { setText("Cet enfant est déja ajouté") } const [text, setText] = useState("Ajouter cet enfant") return children.map((element, index) => ( <StyledTab> <Outer style={{ backgroundColor: "grey", color: "yellow" }}> <Inner> <th>Prénom</th> </Inner> <Inner> <th>Nom</th> </Inner> <Inner> <th>Date de naissance</th> </Inner> <Inner> <th> Ajout de l'enfant</th> </Inner> <Outer> <Inner> <td>{element.firstName} </td> </Inner> <Inner> <td>{element.lastName} </td> </Inner> <Inner> <td>{element.birth}</td> </Inner> <Inner> <button onClick={() => assignTutorToChildFunction(element._id)}>{text} </button> </Inner> </Outer> </Outer> </StyledTab> )) }cuando hago clic en un botón, todos mis "Ajouter cet enfant" se reemplazan por "Cet enfant est deja ajouté")
Gracias por tu ayuda
Creo que esto podría funcionar. Esencialmente, debe guardar cada texto por separado, en lugar de tener solo un texto.
const [texts, setTexts] = useState({}); const assignTutorToChildFunction = (id_child) => { setText({...texts, [id_child]: "Cet enfant est déja ajouté"}); }; React.useEffect( () => { let temp_texts = {}; children.map((element, index) => temp_texts[index] = "Ajouter cet enfant"); setTexts(temp_texts); }, [] );Está utilizando una variable de estado. Una vez que lo cambie, provocará una nueva representación y todas sus referencias se actualizarán.
Es mejor intentar tener 2 variables separadas que contengan textos.
const tutorUnassignedText = "Ajouter cet enfant"; const tutorAssignedText = "Cet enfant est déja ajouté";entonces necesita una variable de estado para rastrear dónde mostrar qué texto.
Podrías intentar algo como esto:
const [tutorsAssigned, setTutorsAssigned] = useState(Array.from({length: children.length}).fill(false))y luego dentro de tu mapa usa:
<Inner> <button onClick={() => setTutorsAssigned(prevState => { const tutorsArr = [...prevState]; tutorsArr[index] = !tutorsArr[index] return tutorsArr; })> {tutorsAssigned[index] ? tutorAssignedText : tutorUnassignedText} </button> </Inner>Cada componente hijo debe tener su propio estado:
Const ChildComponent = () => { const assignTutorToChildFunction = (id_child) => { setText("Cet enfant est déja ajouté") } const [text, setText] = useState("Ajouter cet enfant"); return ( <StyledTab> <Outer style={{ backgroundColor: "grey", color: "yellow" }}> <Inner> <th>Prénom</th> </Inner> <Inner> <th>Nom</th> </Inner> <Inner> <th>Date de naissance</th> </Inner> <Inner> <th> Ajout de l'enfant</th> </Inner> <Outer> <Inner> <td>{element.firstName} </td> </Inner> <Inner> <td>{element.lastName} </td> </Inner> <Inner> <td>{element.birth}</td> </Inner> <Inner> <button onClick={() => assignTutorToChildFunction()}>{text} </button> </Inner> </Outer> </Outer> </StyledTab> ) ; } ; Const ParentComponent = () => { return children.map((element, index) => ( <ChildComponent /> )) }