TypeError: this.state.users.map is not a function
I've rewritten this a few times, following a tutorial, but I keep getting the same error. It's pointing to the tag inside divMapper, but i'm not sure what It's trying to tell me
here's the App component:
import React, { Component } from 'react'
import User from './Components/User'
class App extends Component {
state = {
users: [
{name: 'user1', id: '001'},
{name: 'user2', id: '002'},
{name: 'user3', id: '003'},
]
}
nameChangeHandler = (event, id) => {
const userIndex = this.state.users.findIndex(userName => {
return userName.id === id
})
const user = {...this.state.users[userIndex]}
user.name = event.target.value
const userList = {...this.state.users}
userList[userIndex] = user
this.setState({
users: userList
})
}
render() {
let divMapper = (
<div>
{this.state.users.map(person => {
return <User
name={person.name}
id={person.id}
changed={event => this.nameChangeHandler(event, person.id)}
/>
})}
</div>
)
return (
<div>
{divMapper}
</div>
)
}
}
export default App
and here's the User component:
import React from 'react'
function User(props) {
return (
<div>
<input
type="text"
placeholder="type here..."
onChange={props.changed}
/>
<p>{props.name}</p>
</div>
)
}
export default User
TypeError: this.state.users.map is not a function I've rewritten this a few times, following a tutorial, but I keep getting the same error.
It's pointing to the tag inside divMapper, not sure what It's trying to tell me