i try to do a map in React js with button, if i click on a buton, it would change the text of it, but when i click on the button, it changes all the button.
I know the problem is i don't specific the button_id but i don't have any idea to get this.
There is my code:
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>
))
}
when i click on a button, all my "Ajouter cet enfant" are replaced by "Cet enfant est deja ajouté")
Thanks for your help
I think this might work. Essentially, you need to save each text separately, instead of just having one text.
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);
},
[]
);
You are using a state variable. Once you change it, it will cause a re-render and all of your references will be updated.
Better to try to have 2 separate variables containing texts.
const tutorUnassignedText = "Ajouter cet enfant";
const tutorAssignedText = "Cet enfant est déja ajouté";
then you need a state variable to track where to show which text.
You could try something like this:
const [tutorsAssigned, setTutorsAssigned] = useState(Array.from({length: children.length}).fill(false))
and then inside your map use:
<Inner>
<button
onClick={() => setTutorsAssigned(prevState => {
const tutorsArr = [...prevState];
tutorsArr[index] = !tutorsArr[index]
return tutorsArr;
})>
{tutorsAssigned[index] ? tutorAssignedText : tutorUnassignedText}
</button>
</Inner>
Each child component must have own state:
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 />
))
}