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 id='home-header'>

            <div id='userlist'>
                // use instead of
                { => {

                    return (
                        <div classname='user'>
export default userlist;

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

<userlist users={userlist}/>


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:

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

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