0
214
Views¿Puedo usar DRY Concept para este código en React JS?
import React from "react"; import { Chip, Box } from '@mui/material'; const Browse = () => { const [chip, setChip] = React.useState("all") const handleClick = (event)=>{ setChip(event.target.textContent); console.log(chip) } return ( <Box mx={2} > <Box mt={2} sx={{display:"flex", gridGap:"20px", flexWrap:"wrap"}} > <Chip label="Price" sx={{color:"#FF005E"}} onClick={handleClick} /> <Chip label="Type of place" sx={{color:"#FF005E"}} onClick={handleClick} /> <Chip label="all" variant={ "all" === chip ? "filled": "outlined" } onClick={handleClick} /> <Chip label="mountain" variant={"mountain" === chip ? "filled": "outlined" } onClick={handleClick} /> <Chip label="beach" variant={ "beach" === chip ? "filled": "outlined" } onClick={handleClick} /> <Chip label="island" variant={ "island" === chip ? "filled": "outlined" } onClick={handleClick} /> <Chip label="desert" variant={ "desert" === chip ? "filled": "outlined" } onClick={handleClick} /> <Chip label="plain" variant={ "plain" === chip ? "filled": "outlined" } onClick={handleClick} /> </Box> </Box> ); }; export default Browse;Ayúdenme, necesito un concepto DRY simple para mi código. Quiero hacer una pequeña animación con el componente de chip "meterial-ui". así que estoy escribiendo el mismo código una y otra vez. entonces, por favor resuelva esto cualquiera... Y gracias :)
·
Juan Pablo Isaza
2 answers
Answer question0
Use una variedad de variantes y luego asigne:
const chips = ["all","mountain","beach","island","desert","plain"] .map(variant => ( <Chip key={variant} label="all" variant={ variant === chip ? "filled": "outlined" } onClick={handleClick} /> )) Entonces puede usar {chips} en su JSX a continuación.
Documentación: https://reactjs.org/docs/lists-and-keys.html
·
Juan Pablo Isaza
Report
0
Puede extraer un método que crea el Chip
const createChip = (label) => <Chip label={label} variant={ label === chip ? "filled": "outlined" } onClick={handleClick} />Entonces llámalo así
{createChip("all")} {createChip("plain")} ...o crear una matriz
{["all", "plain"].map(createChip)}pero asegúrese de que cada elemento tenga una clave
<Chip key={label} ...
·
Juan Pablo Isaza
Report
Answer question