0
217
ViewsCan I use DRY Concept for this code in 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;
Help me any one, I need simple DRY Concept for my code. I want to do something little animation with "meterial-ui" Chip Component. so I am write code same code again and again. so, please solve this anyone... And thanks :)
·
Juan Pablo Isaza
2 answers
Answer question0
Use an array of variants and then map:
const chips = ["all","mountain","beach","island","desert","plain"]
.map(variant => (
<Chip
key={variant}
label="all"
variant={ variant === chip ? "filled": "outlined" }
onClick={handleClick} />
))
Then you can use {chips} in your JSX below.
Documentation: https://reactjs.org/docs/lists-and-keys.html
·
Juan Pablo Isaza
Report
0
You can extract a method that create the Chip
const createChip = (label) => <Chip label={label} variant={ label === chip ? "filled": "outlined" } onClick={handleClick} />
Then call it like so
{createChip("all")}
{createChip("plain")}
...
or create an array
{["all", "plain"].map(createChip)}
but make sure each item has a key
<Chip key={label} ...
·
Juan Pablo Isaza
Report
Answer question