title: React.Js - Typescript how to pass an array of Objects as props?
body: <p>everyone.</p>
  <p>So I am learning TypeScript with React.Js and I have come to a problem.</p>
  <p>I have a &quot;page&quot; that has an array of objects that have further information about each user</p>
  <pre><code>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'}
      ];
  </code></pre>
  <p>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</p>
  <p>So question is how can I pass the USERS array into UsersList ?</p>
  <p>This is my structure</p>
  <p>This is my /users page</p>
  <pre><code>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 (
    
          &lt;UsersList  
              user={USERS[0].name} 
              id={USERS[0].id} 
              image={USERS[0].image} 
              placeName={USERS[0].places} 
              placeCount={USERS[0].placeCount}/&gt;
       
        )
  }
  
  export default User
  </code></pre>
  <p>This is my UsersList component</p>
  <pre><code>import UsersListProps from './props/props_UserItem';
  import UserIListtem from './UserIListtem';
  
  
  
  const UsersList = ( props : UsersListProps) =&gt;{
  
      const {user, id, image, placeCount, placeName} = props
  
      if(props === null){
          return(
              &lt;div&gt;
                  &lt;h1&gt;No users found&lt;/h1&gt;
              &lt;/div&gt;
          );
      }
  
      return(
          &lt;ul&gt;
              {
                  &lt;UserIListtem 
                      user={user} 
                      id={id} 
                      image={image} 
                      placeName={placeName} 
                      placeCount={placeCount}/&gt; 
              }
          &lt;/ul&gt;
      );
    
  }
  </code></pre>
  <p>and this is my UsersListItem component</p>
  <pre><code>import UsersListProps from './props/props_UserItem';
  
  const UserIListtem = (props: UsersListProps) =&gt; {
      const {user, id, image, placeCount, placeName} = props;
    return (
      &lt;li&gt;
      &lt;div&gt;
  
          &lt;div&gt;
              &lt;img src={image} alt={placeName}/&gt;
          &lt;/div&gt;
          &lt;div&gt;{id}
              &lt;h2&gt;{user}&lt;/h2&gt;
              &lt;h3&gt;{placeCount}&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/li&gt;
    )
  }
  
  export default UserIListtem
  </code></pre>
  <p>And this is my UsersListProps props that I had put into seperate file called props_UserItem.tsx</p>
  <pre><code>interface UsersListProps {
      user: string,
      id: number,
      image: string,
      placeCount: number,
      placeName: string
  
  }
  
  export default UsersListProps
  </code></pre>