How do you set a property of an object in an array state in React?

Question

Let's say we want to keep the filters of a list in a state.

const [filters, setFilters] = useState([])

And one sample of filters array could be:

[
    {
        "property": "Name",
        "value": "John",
        "operator": "eq"
    },
    {
        "property": "Age",
        "value": "18",
        "operator": "gt"
    },
    {
        "property": "IsMarried",
        "value": true,
        "operator": "eq"
    }
]

Now let's say I want to change 18 to 24. This is my code. But it does not work:

const setFilter = (property, value, operator) => {
    var isAdded = false;
    for (var i = 0; i < filters.length; i++) {
        if (filters[i].property === property) {
            if (filters[i].operator && operator && filters[i].operator === operator) {
                const otherFilters = filters.filter(i => i.property !== property && i.operator !== operator)
                setFilters([...otherFilters, {
                    property,
                    operator,
                    value
                }])
                isAdded = true
                break;
            }
        }
    }
    if (!isAdded) {
        setFilters(previousFilters => [...previousFilters, {
            property,
            operator,
            value
        }])
    }
}

DecPK · Accepted Answer · 2022-07-12 06:56:29Z

1

You can just map over filters state and change value or operator if the property matches as:

CODESANDBOX LINK

  function setFilterValue(property, value, operator) {
    return filters.map((filter) => {
      return filter.property === property
        ? { property, value, operator }
        : filter;
    });
  }

  function changeFilterValue() {
    const value = setFilterValue("Age", "24", "gt");
    setFilters(value);
  }

edited Jul 12, 2022 at 6:56

answered Jul 12, 2022 at 5:40

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

2 Comments

Big boy Over a year ago

But it only changes the state directly inside the state variable. It does not call React's setFilters set state function.

DecPK Over a year ago

It is not changing state directly we are returning new state (i.e array) and which is argument of setFilters . Answers updated

Collectives™ on Stack Overflow

How do you set a property of an object in an array state in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related