react.js buttons that display different items from array - arrays

Question

I didn't know how to ask this but basically I just want list of buttons that display different text. When you click a button it shows the text. But instead of hardcoding every button I want it to be dynamic. So far when I click any of my buttons, everything shows instead of individually. (one button should show one definition" I think it is the way I am using state probably.
import React, { useState } from "react";
import terms from "./TermsComponentData.js";
import "./TermsComponent.css";
function TermsComponent() {
const [showTerm, setShowTerm] = useState(false);
const buttonList = terms.map((term, index) => (
<div>
{showTerm && <h1>{term.definition}</h1>}
<button
key={index}
className="buttons-container-button"
onClick={() => {
setShowTerm(!showTerm);
}}
>
{term.name}
</button>
</div>
));
return (
<div className="terms-container">
<div className="buttons-container">{buttonList}</div>
</div>
);
}
MY DATA
const terms = [
{
name: "Term1",
definition: "This is the definition1",
},
{
name: "Term2",
definition: "This is the definition2",
},
{
name: "Term3",
definition: "This is the definition 3",
},
{
name: "Term4",
definition: "This is the definition 4",
}
];
export default terms;

Answer 1

Currently your state variable showTerm is common for all of the buttons. So to achieve the result you are describing, you need to encapsulate the state for each button.
The easiest way to do this, is to create a separate component which contains the showTerm state, and then map a list of this component with the given data based on the terms:
// 👇 added separate term button with it's own state
function TermButton({ term }) {
const [showTerm, setShowTerm] = useState(false);
return (
<div>
{showTerm && <h1>{term.definition}</h1>}
<button
className="buttons-container-button"
onClick={() => {
setShowTerm(!showTerm);
}}
>
{term.name}
</button>
</div>
);
}
function TermsComponent() {
return (
<div className="terms-container">
<div className="buttons-container">
{ // 👇 for each term, create a TermButton with the given term
terms.map((term, index) => <TermButton key={index} term={term} />)}
</div>
</div>
);
}