score:1

Accepted answer

the problem is that you are mapping over the props object, not the userlist. try to do the following:

const userlist = (props) => {

return (
        <div>
            <div id='home-header'>
                <h1>devshelp</h1>
            </div>

            <div id='userlist'>
                // use props.users.map instead of props.map
                {props.users.map((user) => {

                    return (
                        <div classname='user'>
                            <h3>{user.username}</h3>
                        </div>
                    )
                })}
            </div>
        </div>
)}
export default userlist;

and at home component change the props of userlist to users, just to avoid confusion

<userlist users={userlist}/>

score:2

i wouldn't name props for a component "props", really:

<userlist props={userlist}/>

if you really want to, then at least inside userlist, you would need to refer to the props object:

props.props.map...

name your props to something that make sense to you, like for example "users". then call props.users.map(user => {...})

a react component can take many props. when you want to access them inside the component, you need to do so by name. in your case, you defined userlist like this:

function userlist(props){...}

in this case, all props would have to be accessed via the props object. you defined a props value inside this object when you called <userlist props={userlist]} />

personally, i always destructure props when i define a new component, like this:

function userlist({users}) {...}

as a side note, your code would have worked if you had destructured the props object: function userlist({props}) {...} this would be the smallest change you could do to make the code work, i guess. but again, i would not use "props" as a name for a prop.


Related Query

More Query from same tag