title: React Typescript passing props and data type
body: <p>I'm still pretty new into the world of TypeScript and I have a couple of questions. I have a few errors in my code, and I'm not rlly sure how to pass the props and choose the right type. I would appreciate a bit of help on that one.</p>
  <p>Do you have maybe a good source where I can find all the necessary React info in one place just for the start?</p>
  <p>tl;dr</p>
  <ol>
  <li>What will be the { data } type? How to define it?</li>
  <li>How to pass the functions as props to the Results.tsx file? How define result, results and openPopup in this function?</li>
  <li>Did I miss something else?</li>
  </ol>
  <p><strong>App.tsx</strong></p>
  <pre><code> import React, { useState } from 'react'
  import axios from 'axios'
  
  import Search from './components/Search'
  import Results from './components/Results'
  import Popup from './components/Popup'
  
  
  export type selected = {
      Title?: string,
      Year?:number
  }
  
  type values = {
  s: string,
  results: string[],
  selected: selected,
  }
  
  interface popup {
      id: string
  }
  
  const App: React.FC = () =&gt; {
    const [state, setState] = useState&lt;values&gt;({
      s: &quot;&quot;,
      results: [],
      selected: {}
    });
  
  
    const apiurl = &quot;http://www.omdbapi.com/?apikey=dfe6d885&quot;;
  
    const search = (e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {
      if (e.key === &quot;Enter&quot;) {
        axios(apiurl + &quot;&amp;s=&quot; + state.s).then(({ data }) =&gt; {
          let results = data.Search;
  
          setState(prevState =&gt; {
            return { ...prevState, results: results }
          })
        });
      }
    }
    
    const handleInput = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      let s = e.target.value;
  
      setState(prevState =&gt; {
        return { ...prevState, s: s }
      });
    }
  
    const openPopup = (id : string) =&gt; {
      axios(apiurl + &quot;&amp;i=&quot; + id).then(({ data }) =&gt; {
        let result = data;
  
        console.log(result);
  
        setState(prevState =&gt; {
          return { ...prevState, selected: result }
        });
      });
    }
  
    const closePopup = () =&gt; {
      setState(prevState =&gt; {
        return { ...prevState, selected: {} }
      });
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;header&gt;
          &lt;h1&gt;Movie Database&lt;/h1&gt;
        &lt;/header&gt;
        &lt;main&gt;
          &lt;Search handleInput={handleInput} search={search} /&gt;
  
          &lt;Results results={state.results} openPopup={openPopup} /&gt;
  
          {(typeof state.selected.Title != &quot;undefined&quot;) ? &lt;Popup selected={state.selected} closePopup={closePopup} /&gt; : false}
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  
  export default App
  </code></pre>
  <p><strong>Results.tsx</strong></p>
  <pre><code>import React from 'react'
  
  import Result from './Result'
  
  function Results ({ results, openPopup }) {
      return (
          &lt;section className=&quot;results&quot;&gt;
              {results.map(result =&gt; (
                  &lt;Result key={result.imdbID} result={result} openPopup={openPopup} /&gt;
              ))}
          &lt;/section&gt;
      )
  }
  
  export default Results
  </code></pre>