How can I alter my redux action and reducer to have array with objects in it?

Question

I have currently redux action and reducer that allows me to add or remove items from the array. Now I want to add more items in following format. [{id: , car: '', text: '', box1Checked: '', box2Checked: '', box3Checked: ''}]

This is the form I have.

this is my current action file:

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

export const addNewCar = (text) => ({
    type: ADD_NEW_CAR,
    payload: text
})

export const deleteExistingCar = (car) => ({
    type: DELETE_EXISTING_CAR,
    payload: car
})

this is the reducer:

const ADD_NEW_CAR = 'ADD_NEW_CAR'
const DELETE_EXISTING_CAR = 'DELETE_EXISTING_CAR'

const initialState = {
  cars: [],
}

const carsListReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NEW_CAR:
      return {
        ...state,
        cars: [...state.cars, action.payload],
      }
    case DELETE_EXISTING_CAR:
        return {
            cars: [
                ...state.cars.filter(car => car !== action.payload)
            ]
        }
    default:
      return state
  }
}

export default carsListReducer

This is where i call the function to add cars.

  const addCarDetails = () => {
    if (newCar.length > 0) {
      // setCars([
      //   ...cars,
      //   {
      //     id: cars.length + 1,
      //     license: newCar,
      //   },
      // ])
      props.addNewCar(newCar)
      setValid(true)
      setNewCar('')
      carAddedToast()
    } else {
      setValid(false)
    }
  }

  const removeCar = (item) => {
    props.deleteExistingCar(item)
    //setCars(cars.filter((item) => item.license !== license))
    carRemovedToast()
  }

Answer 1

The problem was solved using following. It was really small change that was needed.

    case ADD_NEW_CAR:
      return {
        ...state,
        cars: [...state.cars, {id: state.cars.length, ...action.payload}],
      }