title: ReactJS - loop througt child and than in parent display first 10 child objects
body: <p>I have a problem with getting data from child to parent that is fetched from API </p>
  
  <p>Child:</p>
  
  <pre><code>class Carton extends React.Component {
   constructor(props) {
   super(props);
  
   this.state = {
    loading: false,
    matchData: []
  };
  }
  </code></pre>
  
  <p>Here I'm fetching data from API and updating the state</p>
  
  <pre><code>async componentDidMount() {
   setTimeout(() =&gt; {
    this.loading = true;
    fetch(url)
      .then(res =&gt; res.json())
      .then(data =&gt; {
        this.setState({
          matchData: data.doc[0].data[this.props.sportId].realcategories
        });
      });
  }, 500);
  </code></pre>
  
  <p>I have looped through nested objects from API and displayed it in the child but I'm stuck how to get data of nested objects to parent. Here is an example how deep I needed to go to get values that I needed</p>
  
  <pre><code>getData() {
        this.state.matchData.map((data, i) =&gt;
        data.tournaments.map((tour, j) =&gt;
          tour.matches.map((matc, k) =&gt;
          //values of objects that i need to render a card in Child component
          )//...
  </code></pre>
  
  <p>My first question is if it's better to practice to fetch data from API in parent and then pass objects to the child? </p>
  
  <p>How to pass those objects  to parent so I  can iterate over and select the first 5 of them for 
  example</p>
  
  <p>If anybody has any idea or suggestions, please let me know </p>
  
  <p>Br</p>
  
  <p>Stevo</p>