title: How to pass an array as props in React component and use map on it?
body: <p>I'm developing an app which has a searchbar - when user type something, an API call is made and the json is being send back. In the code below an array called sampleList represents this json. The json is then passed to the List component to render a simple list. This is what I did, however it doesn't work.
  I'm a begginer in react and I have two main questions:</p>
  <ol>
  <li>how to show the List component when user clicks on a search button?</li>
  <li>how to properly pass props to List component?</li>
  </ol>
  <p>Here's the code:
  Searchbar.tsx</p>
  <pre><code>const sampleList = [
      { id: 1, name: &quot;a&quot;},
      { id: 2, name: &quot;b&quot;},
  ];
   
  const Searchbar = () =&gt; {
      const onSubmit = (e) =&gt; {
           sampleList = getJson();
      }
      return (
      &lt;form className=&quot;search-form&quot; onSubmit={onSubmit}&gt;
          &lt;input type=&quot;text&quot;&gt;&lt;/input&gt;
          &lt;input type=&quot;submit&quot;&gt;&lt;/input&gt;
      &lt;/form&gt;
      &lt;List prop={sampleList}/&gt;
  )}
  </code></pre>
  <p>List.tsx</p>
  <pre><code>const List = ({sampleList}) =&gt; {
      
      return(
      &lt;div&gt;
          sampleList.map((item, index) =&gt;
          &lt;div key={item.id}&gt;
              {item.name}
          &lt;/div&gt;
      )
      &lt;/div&gt;
  )}
  </code></pre>
  <p>Any help would be greatly appreciated.</p>