React.Js - Typescript how to pass an array of Objects as props?

Question

everyone.

So I am learning TypeScript with React.Js and I have come to a problem.

I have a "page" that has an array of objects that have further information about each user

const USERS = [
        {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
        {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', image: 'asdasd'}
    ];

Now, I have a User page that renders list of all users, and this list is a component that is made out of UsersListItem component, now this component renders all data from each object inside the USERS array. I know how to pass one object from USERS array, but I want to send whole array with all objects

So question is how can I pass the USERS array into UsersList ?

This is my structure

This is my /users page

import UsersList from '../components/UsersList';


function User() {
    const USERS = [
        {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
        {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', image: 'asdasd'}
    ];


    return (
  
        <UsersList  
            user={USERS[0].name} 
            id={USERS[0].id} 
            image={USERS[0].image} 
            placeName={USERS[0].places} 
            placeCount={USERS[0].placeCount}/>
     
      )
}

export default User

This is my UsersList component

import UsersListProps from './props/props_UserItem';
import UserIListtem from './UserIListtem';



const UsersList = ( props : UsersListProps) =>{

    const {user, id, image, placeCount, placeName} = props

    if(props === null){
        return(
            <div>
                <h1>No users found</h1>
            </div>
        );
    }

    return(
        <ul>
            {
                <UserIListtem 
                    user={user} 
                    id={id} 
                    image={image} 
                    placeName={placeName} 
                    placeCount={placeCount}/> 
            }
        </ul>
    );
  
}

and this is my UsersListItem component

import UsersListProps from './props/props_UserItem';

const UserIListtem = (props: UsersListProps) => {
    const {user, id, image, placeCount, placeName} = props;
  return (
    <li>
    <div>

        <div>
            <img src={image} alt={placeName}/>
        </div>
        <div>{id}
            <h2>{user}</h2>
            <h3>{placeCount}</h3>
        </div>
    </div>

</li>
  )
}

export default UserIListtem

And this is my UsersListProps props that I had put into seperate file called props_UserItem.tsx

interface UsersListProps {
    user: string,
    id: number,
    image: string,
    placeCount: number,
    placeName: string

}

export default UsersListProps

Hakim Abdelcadir · Accepted Answer · 2022-06-22 10:34:41Z

13

You can simply return this in the User component:

return (
 <UsersList users={USERS} />
)

Then the UsersList component will become:

const UsersList = ( { users } : UsersListProps) => {
 if(!users?.length){
   return(
     <div>
       <h1>No users found</h1>
     </div>
   );
 }
 return(
  <ul>
   {users.map(({ id, name, image, places, placeCount }) => (
     <UserIListtem
      key={id} 
      name={name} 
      id={id} 
      image={image} 
      places={places} 
      placeCount={placeCount}/> 
   ))}
  </ul>
 );
}

And the UserIListtem component:

const UserIListtem = ({ name: user, id, image, placeCount, places: placeName }: User) => {
 return (
  <li>
   <div>
    <div>
     <img src={image} alt={placeName}/>
    </div>
    <div>{id}
     <h2>{user}</h2>
     <h3>{placeCount}</h3>
     </div>
   </div>
  </li>
 )
}

Remember to also change the UsersListProps interface to:

export interface UsersListProps {
 users: User[];
}

export interface User {
 id: number;
 name: string;
 image: string;
 placeCount: number;
 places: string;
}

answered Jun 22, 2022 at 10:34

Hakim Abdelcadir

1,3266 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quintessa Anderson Over a year ago

Thank you so much for providing such a detailed answer! This helped me tremendously. I had to change the syntax for passing users into the UserList component. Once I changed that one small part, everything worked for me. I changed it to this: const UsersList: React.FC< UsersListProps > = ({ users }) => {

Nikola Artukov · Accepted Answer · 2022-06-22 10:16:33Z

1

You can just replace props with users: Array and then send the whole array and load the data from there in your UserIListtem.

answered Jun 22, 2022 at 10:16

Nikola Artukov

214 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React.Js - Typescript how to pass an array of Objects as props?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related