.map is not a function (am I really not using an array here?)

Question

I'm trying to learn some react hooks by practice and trying to change the state at the same time.

Here is what my useState hook looks like:

const [names, setNames] = useState([
    "James",
    "Jessica",
    "Roger",
    "Alfred"
])

I have used JSX to return the array items from "names" on the page as follows:

{names.map((name)=> {
        return <p>{name}</p>
})}

This seems to display everything just fine, suggesting that the map function works correctly on the array called names.

However, when I create a function to update the state using setNames, I get the error "TypeError: names.map is not a function"

Here is what the function looks like:

const addName = () => {
    setNames({
      names: [...names, "Jessica"]
    })
  }

I am just running this in an onClick event through a button in the app:

<button onClick={addName}>Add</button>

Sorry in advanced if this is novice but I can't seem to understand why I'm getting this error. I understand that .map can only be used on an array, however that's what I thought names was.. an array. Also it displays names when I use the .map function so I'm just confused by the error itself.

Thanks in advance for any help.

Curly brackets are used for objects not arrays. you need to use `[ // code // ]` not `{ // code // }`. Nicholas Tower gave you na example and a full answer to how — Lith, Jun 17 '21 at 12:30

Nicholas Tower · Answer 1 · 2021-06-17T12:30:48.463

2

setNames({
  names: [...names, "Jessica"]
})

This is changing your state to no longer be an array, but rather to be an object with a .names property on it. Only in class components do you need to pass in an object when setting state.

Instead, you should do the following:

setNames([...names, "Jessica");

One slight improvement you could do is to use the function version of setNames. This will make sure you're always using the most recent version of the state, and thus eliminate the possibility of some bugs when setting state multiple times:

const addName = () => {
  setNames(prev => {
    return [...prev, "Jessica"];
  });
}

edited Jun 17 '21 at 12:30

answered Jun 17 '21 at 12:26

Nicholas Tower

72,740
7
86
98

Thank you this works and I will be sure to checkmark it. Also, I had recently written my function part wrong, I had it written as you did just without the "prev" part added into it. – cstmxyz Jun 17 '21 at 12:29

score 0 · Accepted Answer · answered Jun 17 '21 at 12:28

You're using the old setState logic.

setNames accepts the new value as first param, not an object, to add a name, change the addName to the following:

const addName = () => {
    setNames([...names, "Jessica"]) 
}

^{Correct modification of state arrays in React.js}

Working example:

const {useState} = React;

const SameSet = () => {
    const [names, setNames] = useState([
        "James",
        "Jessica",
        "Roger",
        "Alfred"
    ]);
    
    const addName = () => {
        setNames([...names, "Jessica"])
    }
    
    return (  
        <div>
            {names.map((name) => <p>{name}</p>)}
            <button onClick={addName}>Add</button>
        </div>
    )
}
ReactDOM.render(<SameSet />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Thank you for helping me understand that about the old setState logic. — cstmxyz, Jun 17 '21 at 12:32

.map is not a function (am I really not using an array here?)

2 Answers2