0
183
VistasHow to render components from an array on screen only when the corresponding button is clicked?
I need to show the objects in the array only when its button is clicked. So, I'm adding items to a list when each button is clicked. So I guess I need to add some kind of conditional logic?
const Calc = () => {
const jobs = [
{ title: "Patio", body: <Patio /> },
{ title: "Fence", body: <Fence /> },
{ title: "Garden", body: <Garden /> },
{ title: "Footing", body: <Foot /> },
{ title: "Deck", body: <Deck /> },
];
const [showOption, setShowOption] = useState(false);
const optionClickHandler = () => {
setShowOption(true);
};
return (
<div className="Calc">
<div>
<BasicMenu />
</div>
<button onClick={optionClickHandler}>Footing</button>
<button>Garden</button>
<button>Fence</button>
<button>Patio</button>
<button>Deck</button>
<div>
<div>
{jobs.map(({ title, body }) => {
return (
<div>
<div>{title}</div>
<div>{body}</div>
</div>
);
})}
</div>
</div>
</div>
);
};
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You can use a Set to keep track of the jobs that need to be shown and render the filtered jobs.
const jobs = [
{ title: "Patio", body: <Patio /> },
{ title: "Fence", body: <Fence /> },
{ title: "Garden", body: <Garden /> },
{ title: "Footing", body: <Foot /> },
{ title: "Deck", body: <Deck /> }
];
const Calc = () => {
const [jobsToShow, setJobsToShow] = useState(new Set());
const showJob = (jobTitle) => () => {
setJobsToShow((prev) => new Set(prev).add(jobTitle));
};
const filteredJobs = useMemo(() => {
return jobs.filter((job) => jobsToShow.has(job.title));
}, [jobsToShow]);
return (
<div className="Calc">
{jobs.map((job) => (
<button key={job.title} onClick={showJob(job.title)}>
{job.title}
</button>
))}
<div>
<div>
{filteredJobs.map(({ title, body }) => {
return (
<div key={title}>
<div>title: {title}</div>
<div>body: {body}</div>
<hr />
</div>
);
})}
</div>
</div>
</div>
);
};
·
Juan Pablo Isaza
Denunciar
Responde la pregunta