js react converting dropdown to checkbox filter-CodePudding

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",
    }
]

working dropdown menu:

https://codesandbox.io/s/shy-bash-bj5f5s?file=/src/contentBuilder.js

not working checkboxes:

https://codesandbox.io/s/vigilant-sun-mh3rg9?file=/src/App.js

Does anybody know what I'm missing? Any help is appreciated! :)

CodePudding user response：

I hope this solution will be work for you , check this live example

Sandox

Use filter logic like this

const filteredData = data.filter(
    (x) => x.Sektor === checked.find((item) => item === x.Sektor)
  );

CodePudding user response：

Read this doc GoodPractice

use checkbox list like this

<div className="checkList">
  <div className="title">Your CheckList:</div>
     <div className="list-container">
         {options.map((item, index) => (
            <div key={index}>
            <input onChange={handleCheck} value={item.value} type="checkbox" />
             <span>{item.value}</span>
          </div>
    ))}
    </div>
</div>

in the change handler write like this

const handleCheck = (event) => {
    var updatedList = [...checked];
    if (event.target.checked) {
      updatedList = [...checked, event.target.value];
    } else {
      updatedList.splice(checked.indexOf(event.target.value), 1);
    }
    setChecked(updatedList);
  };

Live example Sandbox