How to map trough array of object and toggle boolean property selected

Question

I have state in React functional component. It is and array of objects. Every object in that collection has property "selected", which is a boolean. That array looks like this:

const [filterOptions, setFilterOptions] = useState([
        {
            title: 'highest',
            selected: true,
        },
        {
            title: 'lowest',
            selected: false,
        },
    ]);

After handleFilter func is executed I need to set state so this array has same title properties but reverse (toggle) selected properties.

This is handleFilter func in which I need to toggle every selected property of array objects:

const handleFilter = () => {
        setFilterOptions();
    };

what's the output you want? could not understand from your post — Zohaib Ijaz
– Zohaib Ijaz, Commented Apr 9, 2020 at 12:50

Kourosh Neyestani · Accepted Answer · 2020-04-09 13:08:04Z

1

function App() {

    const [filterOptions, setFilterOptions] = useState([
        {
            title: 'highest',
            selected: true,
        },
        {
            title: 'lowest',
            selected: false,
        },
    ]);

    const handleFilter = (e) => {
        let newArr = [...filterOptions];

        let value = e.target.value;

        if (value === "lowest") {

            newArr[0].selected = true;
            newArr[1].selected = false;

        } else if (value === "highest") {

            newArr[0].selected = false;
            newArr[1].selected = true;

        } 

        setFilterOptions(newArr)

    };
    return (
        <div>
            <select onChange={handleFilter}>
                <option value="lowest">a</option>
                <option value="highest">b</option>
            </select>
            {console.log((filterOptions))}
        </div>
    );
}

edited Apr 9, 2020 at 13:08

answered Apr 9, 2020 at 12:56

Kourosh Neyestani

8513 gold badges10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pokreniseweb Over a year ago

I dont see how is this solution toggle selected boolean property? I guess you mean !value

Waleed Nasir · Accepted Answer · 2020-04-09 12:51:55Z

0

please check hope it will work

var arryObj =[
        {
            title: 'highest',
            selected: true,
        },
        {
            title: 'lowest',
            selected: false,
        },
    ]

const handleFilter = (index,value) => {
    arryObj[index].selected = value
    };
handleFilter(0,false)
console.log(arryObj)
handleFilter(1,true)
console.log(arryObj)

answered Apr 9, 2020 at 12:51

Waleed Nasir

6076 silver badges9 bronze badges

2 Comments

Pokreniseweb Over a year ago

But what if I don't know the number of objects in that array? I see here you hardcoded calls to handleFilter with indexes 0 and 1? And this needs to be set into state

Waleed Nasir Over a year ago

yes hardcode just for example, hope you will use map for rendering this items , so then you can pass map index and item.selected with sign ! like this !item.selected its means is item.selected = true and passing !item.selected like this it will update your Object example filterOptions.map((item,index)=>( ///*UI here and function on click like this this.handleFilter(index, !item.selected)*//// )) thanks :-)

wxker · Accepted Answer · 2020-04-09 13:07:57Z

0

You can pass a function into setFilterOptions to change the state based on the previous state.

const handleFilter = () => {
    setFilterOptions(prevState => 
        prevState.map(obj => ({...obj, selected: !obj.selected}))
    );
};

edited Apr 9, 2020 at 13:07

answered Apr 9, 2020 at 13:01

wxker

1,8961 gold badge8 silver badges16 bronze badges

2 Comments

Pokreniseweb Over a year ago

For this solution I get eslint error "Declaration or statement expected"

wxker Over a year ago

@Pokreniseweb My bad, I forgot a pair of parentheses hahaha. Fixed it.

Collectives™ on Stack Overflow

How to map trough array of object and toggle boolean property selected

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related