0
179
Views¿Cómo representar componentes de una matriz en la pantalla solo cuando se hace clic en el botón correspondiente?
Necesito mostrar los objetos en la matriz solo cuando se hace clic en su botón. Entonces, estoy agregando elementos a una lista cuando se hace clic en cada botón. Entonces, ¿supongo que necesito agregar algún tipo de lógica condicional?
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 answers
Answer question0
Puede usar un Set para realizar un seguimiento de los trabajos que deben mostrarse y procesar los trabajos filtrados.
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
Report
Answer question