Replace item in array with new value using dispatch in React

Question

I've got an initial array, which can be added to and deleted from, no problems there..

const initialItems = [
    {
        id: Date.now(),
        text: 'Get milk',
    },
    {
        id: Date.now(),
        text: 'Get eggs',
    },
]

..but I'm trying to figure out how to edit the text effectively of one of the items using a dispatch function.

My dispatch looks like this:

const editItemHandler = () => {
    dispatch({
        type: 'EDIT_ITEM',
        id: Date.now(),
        text: itemInputRef.current.value,
        index,
    })
}

Which is just passing the value of an input

<input
    autoFocus
    type='text'
    ref={itemInputRef}
    onKeyDown={(e) => {
        if (e.key === 'Escape') {
            setToggle(!toggle)
        }
        if (e.key === 'Enter') {
            // Dispatch
            editItemHandler()
            setToggle(!toggle)
        }
    }}
/>

My reducer file looks like this:

const itemReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_ITEM': {
            return [
                ...state,
                {
                    id: action.id,
                    text: action.text,
                },
            ]
        }
        case 'EDIT_ITEM': {
            // Attempt 1
            return [...state.splice((item, index) => index, 1, action.text)]
            // Attempt 2
            return [
                ...state.filter((item, index) => index !== action.index),
                {
                    id: action.id,
                    text: action.text,
                },
           ]
        }
        case 'DELETE_ITEM': {
            return [...state.filter((item, index) => index !== action.index)]
        }
        default: {
            return state
        }
    }
}

export default itemReducer

I've commented in 2 approaches I've already tried in the 'EDIT_ITEM' type.

Approach 1 just deletes the item and adds a new valued one albeit at the bottom of the array, which isn't what I want so I'd have to try and reorder after.

Approach 2 is using splice, which I thought was what would work for replacing an item with the specified value. However all it returns is ONLY the 'edited' with the original text (so not even edited), and deletes everything else.

How am I using this function incorrectly, or is there a better approach to editing an item in place? I'm obviously doing something wrong but can't figure out what. I've searched about and tried various approach to no avail.

Ideally I'd want the item to also keep the same id as before as well, so how to keep that would be a plus.

Answer 1

To update an item in an array you have several choices :

case 'EDIT_ITEM': {
    // using map
    return state.map((item, i) => 
                    i === action.index ? { id: action.id, text: action.text } : item
    // using slice
    return [
      ...state.slice(0, action.index),
      { id: action.id, text: action.text },
      ...state.slice(action.index+1)
    ]

This is an incorrect use of splice

return [...state.splice((item, index) => index, 1, action.text)]

because splice return an array containing the deleted elements, and it doesn't accept an function as first argument but the index at which to start changing the array.

the correct way with splice :

case 'EDIT_ITEM': {
    // using splice
    let newState = [ ...state ]
    newState.splice(action.index, 1, { id: action.id, text: action.text })
    // or you can directly do
    newState[action.index] = { id: action.id, text: action.text }
    // and return the new state
    return newState;