Nextjs: Cant render a component while using map over a array of objects. Objects are not valid as a React child

Question

I dont know why when i want to render a component inside of a map function, basiclly i have a List component, and when i fetch data from an API with the email, etc.. from users i want that component to render that info. But i get the following error:

Unhandled Runtime Error

Error: Objects are not valid as a React child (found: object with keys {email, phone, nick}). If you meant to render a collection of children, use an array instead.
Copy

My List component looks like this:

import React from 'react'

export default function List(email, nick, phone) {
  return (
    <div align="center">
        <hr />
        <strong>Email: </strong> 
        <p>{email}</p>
        <strong>Nick: </strong> 
        <p>{nick}</p>
        <strong>Phone: </strong> 
        <p>{phone}</p>
    </div>
  )
}
Copy

And my List user page looks like this:

import React from 'react'
import Nav from '../../components/Nav/Nav'
import { useEffect, useState } from 'react';
import List from '../../components/User/List';

export default function index() {
  const [users, setUsers] = useState([])

  const fetchUsers = async () => {
    const response = await fetch("http://localhost:3001/api/internal/users");
    const data = await response.json();
    console.log(data["data"])
    setUsers(data["data"])
  }

  useEffect(() => {
    fetchUsers()
  }, [])

  return (
    <div>
      <Nav />
        {users.map(user => (
            <List
              email={user.attributes.email}
              phone={user.attributes.phone}
              nick={user.attributes.nick} 
            />
        ))}
    </div>
    
  )
}
Copy

UPDATE 21 ABR

For some reason when i do this :

export default function List(email, phone, nick) {
  return (
    <div align="center">
        <hr />
        <strong>Email: </strong> 
        <p>{email.email}</p>
        <strong>Nick: </strong> 
        <p>{email.phone}</p>
        <strong>Phone: </strong> 
        <p>{email.nick}</p>
    </div>
  )
}
Copy

It works... Someone knows what it can be?

Answer 1

You are passing the props in a wrong way. Either use it as a single object in props or have all the props it inside {} using destructuring method.

export default function List({email, phone, nick}) {}


         OR

export default function List(props) {
  return (
   <div align="center">
    <hr />
    <strong>Email: </strong> 
    <p>{props.email}</p>
    <strong>Nick: </strong> 
    <p>{props.phone}</p>
    <strong>Phone: </strong> 
    <p>{props.nick}</p>
</div>
Copy

) }