title: TypeError: Cannot read property 'children' of undefined
body: <p>I' m building a simply React webapp. In my App.js I have the main component that accepts 3 props.(SearchCountry, SearchedCountry and Datas):</p>
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import NavBar from '../Components/NavBar';
  import SideBar from '../Components/SideBar';
  import CountryList from '../Components/CountryList';
  import Scroll from '../Components/Scroll';
  import Main from '../Components/Main';
  import SearchCountry from '../Components/SearchCountry';
  import SearchedCountry from '../Components/SearchedCountry';
  import Datas from '../Components/Datas';
  
  class App extends Component {
  
    constructor() {
      super();
      this.state = {
        nations: [],
        searchField: '',
        button: false
      }
    }
  
    onSearchChange = (event) =&gt; {
      this.setState({searchField: event.target.value})
    }
  
    onClickChange = () =&gt; {
      this.setState(prevsState =&gt; ({
        button: true
      }));
    }
  
    render() {
  
      const {nations, searchField, button} = this.state;
  
      const searchedNation = nations.filter(nation =&gt; {
        if(button) {
          return nation.name.toLowerCase().includes(searchField.toLowerCase())
        }
      });
  
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;NavBar/&gt;
          &lt;/div&gt;
            &lt;Main&gt;
              &lt;SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/&gt;
              &lt;SearchedCountry nations={searchedNation}/&gt;
              &lt;Datas/&gt;
            &lt;/Main&gt;
            &lt;SideBar&gt;
              &lt;Scroll className='scroll'&gt;
                &lt;CountryList nations={nations}/&gt;
              &lt;/Scroll&gt;
            &lt;/SideBar&gt;
        &lt;/div&gt;
      );
    }
  
    componentDidMount() {
       fetch('https://restcountries.eu/rest/v2/all')
      .then(response =&gt; response.json())
      .then(x =&gt; this.setState({nations: x}));
    }
  
    componentDidUpdate() {
      this.state.button = false;
    }
  
  }
  
  export default App;
  </code></pre>
  <p>This is my Main.js file:</p>
  <pre><code>import React from 'react';
  
  const Main = (prop1, prop2, prop3) =&gt; {
      return(
          &lt;div role='main' className='dib' style={{width: 'auto'}}&gt;
              &lt;main&gt;
                  &lt;div className='container' style={{margin: '10px', border: '2px solid black'}}&gt;
                      &lt;div&gt;
                          {prop1.children}
                      &lt;/div&gt;
                      &lt;div&gt;
                          {prop2.children}
                      &lt;/div&gt;
                      &lt;div&gt;
                          {prop3.children}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/main&gt;
          &lt;/div&gt;
      );
  }
  
  export default Main;
  </code></pre>
  <p>And that is the Datas.js:</p>
  <pre><code>import React from 'react';
  
  const Datas = () =&gt; {
      return(
          &lt;div&gt;
              &lt;h3&gt;Hello world&lt;/h3&gt;
          &lt;/div&gt;
      );
  }
  
  export default Datas;
  </code></pre>
  <p>I don't understand why I get this error, because the Data.js file contains something inside it and everything has been declared. Thanks in advance to anyone who gives me an answer.</p>