How to push an object into an array with React Hooks

Question

I am trying to push an obj into an array located in a nested object. What would be the best approach because I want it to render the component as well with the new obj.

What I want to achieve with this is for the user to be able to create new categories for the tasks

const [formElements, setFormElements] = useState({
    task: {
        type: 'text',
        value: 'text',
        className: 'task-input'
    },
    categories: {
        type: 'select',
        value: 'select',
        className: 'categories-input',
        cat: [
            {value: 'money', displayValue: 'Money'},
            {value: 'health', displayValue: 'Health'},
            {value: 'daily', displayValue: 'Daily'},
            {value: 'food', displayValue: 'Food'}
        ]
 
        
    }
})

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        setFormElements(prevState => {
            ???

        })
    }

I know this might be a bad question but I have a problem understanding how to update the state in a situation like this. Or this way of having a state is bad from the start?

Bjorne · Accepted Answer · 2021-02-26 13:16:24Z

2

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        const newArray = [...formElements.categories.cat, {value: 'newVal', displayValue: 'Friendly Value'}]
        setFormElements({
          ...formElements,
          categories: {
             ...formElements.categories,
             cat: newArray
             
          }

        })
    }

answered Feb 26, 2021 at 13:16

Bjorne

1,4999 silver badges14 bronze badges

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

Comments

maxwell · Accepted Answer · 2021-02-26 13:24:27Z

I would take a look at using the slightly more advanced hook; useReducer. Check out this note from the react docs:

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax. Another option is useReducer, which is more suited for managing state objects that contain multiple sub-values.

Using useReducer, your example above might look something like:

const [state, dispatch] = useReducer((state, action) => {
    switch(action.type){
        case "UPDATE_CAT":
            return { 
                ...state, 
                categories: {
                    ...state.categories,
                    cat: [...state.cat, action.value]
                }
            }
        default:
            return state
    }
})

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        setFormElements(prevState => {
            dispatch({ type: "UPDATE_CAT", value: { value: "vitamins", displayValue: "Vitamins" } })
        })
    }

Airis · Accepted Answer · 2021-02-26 13:34:16Z

1

There are several ways to achieve this, but try using spread operator:

setFormElements((prevState) => {
  return({
    ...prevState,
    categories: {
      ...prevState.categories,
      cat: [
        [...prevState.categories.cat, 
        {value: '123', displayValue: 'abc'}]
      ]
    }
  })
})

answered Feb 26, 2021 at 13:34

Airis

662 bronze badges

Comments

Nicolae Maties · Accepted Answer · 2021-02-26 13:17:36Z

const [formElements, setFormElements] = useState({
    task: {
        type: 'text',
        value: 'text',
        className: 'task-input'
    },
    categories: {
        type: 'select',
        value: 'select',
        className: 'categories-input',
        cat: [
            {value: 'money', displayValue: 'Money'},
            {value: 'health', displayValue: 'Health'},
            {value: 'daily', displayValue: 'Daily'},
            {value: 'food', displayValue: 'Food'}
        ]
 
        
    }
});

const updatedCategories = (categories) => {
   const catUpdated = categories.cat;
   catUpdated.concat({value: 'new', displayValue: 'NEW'});
   return {
      ...categories,
      cat: catUpdated
   }
}

   const buttonAddCategoryHandler = (e) => {
        e.preventDefault()
        const updatedState = {
          ...formElements,
          categories: updatedCategories(formElements.categories)
        }
        setFormElements(updatedState);
    }

You can use your old state and update it before making another setState.

Collectives™ on Stack Overflow

How to push an object into an array with React Hooks

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related