title: React js Calling Component inside component
body: <p>I am learning react js.
  I am unable to call countrypicker component inside cards component in app.js.
  Can someone please help me?</p>
  <p>This is my cards.js</p>
  <pre><code>import React from 'react';
  import './Cards.css';
  
   const Cards = () =&gt; {
      return(
          &lt;div class=&quot;Cards&quot;&gt;
              &lt;p&gt;Cards&lt;/p&gt;
          &lt;/div&gt;
      );
   }
  
   export default Cards;
  
  </code></pre>
  <p>this is my countrypicker.js</p>
  <pre><code>import React from 'react';
  import './CountryPicker.css';
  
  const CountryPicker = () =&gt; {
      return(
          &lt;div class='CountryPicker'&gt;
              &lt;p&gt;CountryPicker&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  
  export default CountryPicker;
  </code></pre>
  <p>I am calling both components from App.js</p>
  <pre><code>import React,{ Component } from 'react';
  import Cards from './components/Cards/Cards';
  import Chart from './components/Chart/Chart';
  import CountryPicker from './components/CountryPicker/CountryPicker';
  import './App.css';
  
  class App extends Component {
    render(){
      return (
        &lt;div className='App'&gt;
          &lt;p className='p1' style={{color:'White'}}&gt;&lt;b&gt;&lt;u&gt;Covid-19 tracker app&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
          
          &lt;div&gt;
            &lt;Cards&gt;
              &lt;div&gt;&lt;CountryPicker title=&quot;India&quot;/&gt;&lt;/div&gt;
            &lt;/Cards&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>