title: Unable to pass data to a component via props
body: <p>I am trying to render a carousel. I could not pass state data <strong>SliderArr</strong> to make it render in <strong>Slider.tsx</strong></p>
  
  <p>How Can I pass data from one component to another?
  Please kindly advise :)</p>
  
  <p>Main.tsx</p>
  
  <pre><code>//some codes above
  public render(): React.ReactElement&lt;IAProps&gt; {
           return (
          &lt;div className={styles.container}&gt;
              &lt;Slider&gt;
                  {this.state.data.map(item=&gt;
                  &lt;div&gt;
                    &lt;Data 
                    key={item.id}
                    id={item.id}
                    title={item.title}
                    /&gt;   
                 &lt;/div&gt;
                  )}
                &lt;/Slider&gt;  
     &lt;/div&gt;  
  
      );
    }
  
  </code></pre>
  
  <p>Slider.tsx</p>
  
  <pre><code>import *  as React from 'react';
  import {useState} from 'react';
  import './slider.scss';
  import Data from './Data';
  import { IconButton } from 'office-ui-fabric-react/lib/Button';
  function Slider(props){
  
     var SliderArr=[];
     SliderArr.push(Data);
     debugger;
     console.log(SliderArr);
  //codes continues....
  </code></pre>
  
  <p>Data.tsx</p>
  
  <pre><code>import *  as React from 'react';
  
  function Data(props){
          return(
              &lt;div&gt;
              &lt;h1&gt;{props.id}&lt;/h1&gt;
              &lt;h2&gt;{props.title}&lt;/h2&gt;
              &lt;/div&gt;
  
          )
  
  }
  
  export default Data;
  
  </code></pre>
  
  <hr>
  
  <p>2020-02-26 1604
  I found a solution modifying the Slider.tsx</p>
  
  <pre><code>
  function Slider(props){
  
     var SliderArr=[];
     let temp=props.data;
  
     temp.map((i,index)=&gt;
     {SliderArr.push(
     &lt;Data id={i.id} 
     title={i.title}
     photo={i.photo}
     summary={i.summary}  
     /&gt;);
      }
     )
  
  </code></pre>