title: Passing object in props, reactjs with typescript
body: <p>I'm beginning with ReactJS, and I decided to make my project using typescript. It's an app that fetches movies from an API and displays it.</p>
  <p><strong>Here's the app:</strong></p>
  <pre><code>import React from 'react';
  import '../../assets/css/App.css';
  import { Thumb } from '../../components/Thumb';
  
  
  interface State {
    isLoaded: boolean;
    items: any[];
    error: string;
  }
  class App extends React.Component&lt;{}, State&gt; {
  
    state: Readonly&lt;State&gt; = {
      isLoaded: false,
      items: [],
      error: ''
    }
  
    renderThumbsContainer() {
  
      const movies = [
        {title: 'Terminator', original_title: 'Terminator', original_language: 'EN', overview: 'A killer robot from future blablabla...', poster_path:'/terminator.jpg'}
      ];
  
      const thumbs = movies.map((movie, index) =&gt; {
        return (
          &lt;Thumb 
            key={index}
            movie={movie}
          /&gt;
        );
      });
      return (&lt;div&gt;{thumbs}&lt;/div&gt;)
    }
  
    render() {
  
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;header className=&quot;App-header&quot;&gt;
            &lt;h1&gt;Movies&lt;/h1&gt;
          &lt;/header&gt;
          &lt;main&gt;
            {this.renderThumbsContainer()}
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  export default App;
  </code></pre>
  <p><strong>And the component displaying the movie details:</strong></p>
  <pre><code>import React from 'react';
  
  export function Thumb({ movie: props }: any) {
      return (
          &lt;div className=&quot;thumb&quot;&gt;
              &lt;div&gt;{props.title}&lt;/div&gt;
              &lt;div&gt;{props.original_title}&lt;/div&gt;
              &lt;div&gt;{props.original_language}&lt;/div&gt;
              &lt;div&gt;{props.overview}&lt;/div&gt;
              &lt;div&gt;{props.poster_path}&lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>After spending 2 hours fighting with the issue of passing an object through props, I finally figured it out using this parameter in the Thumb component function</p>
  <p>Thumb({ movie: props }: any)</p>
  <p>I thought that the props parameter so Thumb(props: any) should be enough, but datas where not displayed and I finally came up with this, but I just don't understand how this works. First I displayed movie. in the divs, still didn't work and then it worked using props.</p>
  <p>I've a lack of knowledge in typescript, for me I declared an object of type any containing a movie attribute of type props as a parameter but it makes no sense.</p>
  <p>So I'd like to understand this, did I bind the movie attribute coming from the parent to props or something? Please explain.</p>