I'm new in react and i'm trying to do a catalog with checkbox. I want to hide "x" card base on the checkbox selected and show all if none checkbox is checked. But i'm absolutly lost and don't have any idea about how i can do it.
I'm using react components, router-dom and Material UI for the checkbox.
So far this is the Checkbox component:
const CheckBox = () => {
const [checked, setChecked] = useState(
listItems.map((i) => false)
);
const handleCheck = e => {
setChecked(!checked)
const result = e.target.value;
checked === true ? handleCategory(result) : handleAllCategory();
}
const handleCategory = value => {
const card = document.getElementsByClassName(value);
const allCards = document.getElementsByClassName('container-card');
for(let i = 0; i < allCards.length; i++){
allCards[i].style.display = 'none'
}
for(let i = 0; i < card.length; i++){
if(card[i].classList.contains(value)){
card[i].style.display = 'block';
}
}
}
const handleAllCategory = () => {
const allCards = document.getElementsByClassName('container-card');
for(let i = 0; i < allCards.length; i++){
allCards[i].style.display = 'block'
}
}
return (
<>
<Box sx=>
<FormGroup >
{listItems.map((item) => {
return(
<FormControlLabel key={item.id} label={item.title}
control={<Checkbox
value={item.value}
onChange={(e) => handleCheck(e)}
/>}
/>
)
})}
</FormGroup>
</Box>
</>
)
}
This is the list of items i'm mapping:
const listItems = [
{
id: 1,
title: 'Todos los Productos',
value: 'Todos',
},
{
id: 2,
title: 'Bateas Ultrasonido',
value: 'Batea',
},
{
id: 3,
title: 'Diagnostico Directo',
value: 'DiagnosticoDirecto',
},
{
id: 4,
title: 'Electrónica / Portones automáticos',
value: 'Porton',
},
{
id: 5,
title: 'Escáneres',
value: 'Escaner',
},
{
id: 6,
title: 'Escáneres Profesionales AUTEL',
value: 'EscanerProfesional',
},
{
id: 7,
title: 'GNC',
value: 'Gnc',
},
{
id: 8,
title: 'Proyectos Especiales',
value: 'ProyectosEspeciales',
},
{
id: 9,
title: 'Tacómetro',
value: 'Tacometro',
},
{
id: 10,
title: 'Testers',
value: 'Testers',
},
]
And all of that should display, or not, this component:
const CardCatalogo = () => {
return (
<>
<div className='card-section'>
{CardAllItems.map(item => {
return(
<div className={`container-card ${item.type}`} key={item.id}>
<div className="img-card">
<img src={require('../assets/' + item.image + '.png')} alt={item.title} />
</div>
<div className="info-card">
<h3 className="title-card">{item.title}</h3>
<p className="price-card">{'$' + item.price}</p>
<div className="buttons-card">
<button className="more-button">Info</button>
<button className="buy-button">Comprar</button>
</div>
</div>
</div>
)
})}
</div>
</>
) }
The object i use for the card is something like this:
{
id: 1,
image: 'diagnostico_directo/osciloscopio_automotriz',
title: 'Osciloscopio Automotriz',
price: '28.400,00',
type: 'DiagnosticoDirecto',
},
{
id: 2,
image: 'diagnostico_directo/probador_mariposas_motorizadas',
title: 'Probador Mariposas Motorizadas',
price: '22.176,00',
type: 'DiagnosticoDirecto',
},
{
id: 3,
image: 'diagnostico_directo/probador_motores_paso_a_paso',
title: 'Probador de Motores Paso a Paso',
price: '4.400,00',
type: 'DiagnosticoDirecto',
},{
id: 4,
image: 'escaneres/escanes_autolink_629',
title: 'Escaner Autolink 629',
price: '35.213,00',
type: 'Escaner',
},
{
id: 5,
image: 'escaneres_profesionales/maxiCheck_MX808',
title: 'MaxiCheck MX808',
price: '78.000,00',
type: 'EscanerProfesional',
},
{
id: 6,
image: 'escaneres_profesionales/maxisys_Cv',
title: 'Maxisys Cv',
price: '496.000,00',
type: 'EscanerProfesional',
},
{
id: 7,
image: 'escaneres_profesionales/maxiSys_MS906',
title: 'MaxiSys MS906',
price: '240.000,00',
type: 'EscanerProfesional',
},
There are 64 items but all of them have the same keys.
The Checkbox component and the itemList are in the same file. The CardCatalogo is in a different file. In the function "handleCategory" and "handleAllCategory" i'm taking the class as reference an the value of the checkbox to compare. I know, it is an absolute mess, but i have no more ideas of what i should do. If someone wants to take a closer look this is my repo https://github.com/Alvaro0096/Fabianesi-page Both files and the one that contains the object for the card are in src/components...
