mardi 10 mai 2022

js react converting dropdown to checkbox filter

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