Hej!
I am a newbie to javascript but was able to implement a dropdown menu filtering my json-data (everything works fine) but when I convert/change it into checkboxes I won't get any results in my result list.
// dropdown
const ContentBuilder = () => {
const options = [
{ label: "Landwirtschaft", value: "Landwirtschaft" },
{ label: "Forstwirtschaft", value: "Forstwirtschaft" },
]
const [newData, setNewData] = React.useState([]);
const [selectedValue, setSelectedValue] = React.useState(options[0]);
const filteredData = data.filter(x =>
x.Sektor == selectedValue)
const handleFilterInput = (event) => {
let value = event.target.value;
setSelectedValue(value);
};
return (
<section className="content">
<div className="container">
<div className="columns table">
<div className="column is-four-fifth filter">
<label>Sektion <br/>
<select
value={selectedValue}
onChange={handleFilterInput}
>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</label>
</div>
<div className="column is-one-fifth">
<div className="container">
<div className="liste">
<List data={filteredData}/>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
if I only change the select
to input
and add the 'checkbox' type all I get is an empty page
// checkboxes
.
.
.
<input
type = "checkbox"
className = "sektor-checkbox"
value={selectedValue}
onChange={handleFilterInput}
>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</input>
.
.
.
If I put the 'checkbox' inside the map I get the checkboxes but no result list and therefor no filter.
.
.
.
{options.map((option) => (
<>
<input
type = "checkbox"
className = "sektor-checkbox"
value={selectedValue}
onChange={handleFilterInput}
>
</input>
<option value={option.value}>{option.label}</option>
</>
))}
.
.
.
// json
[
{
"Pflanzenname": ["Hanf (Samen-/Faser-)"],
"Sektor": "Landwirtschaft",
},{
"Pflanzenname": "Soja",
"Sektor": "Landwirtschaft",
},{
"Pflanzenname": "Hirse (Sorghum-/Zucker-)",
"Sektor": "Landwirtschaft",
},{
"Pflanzenname": "Riesenweizengras",
"Sektor": "Forstwirtschaft",
}
]
Does anybody know what I'm missing? Any help is appreciated! :)
Aucun commentaire:
Enregistrer un commentaire