0

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

David Martin
  • 101
  • 1
  • 9

0 Answers0