React js Calling Component inside component

Question

I am learning react js. I am unable to call countrypicker component inside cards component in app.js. Can someone please help me?

This is my cards.js

import React from 'react';
import './Cards.css';

 const Cards = () => {
    return(
        <div class="Cards">
            <p>Cards</p>
        </div>
    );
 }

 export default Cards;

this is my countrypicker.js

import React from 'react';
import './CountryPicker.css';

const CountryPicker = () => {
    return(
        <div class='CountryPicker'>
            <p>CountryPicker</p>
        </div>
    );
}

export default CountryPicker;

I am calling both components from App.js

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 (
      <div className='App'>
        <p className='p1' style={{color:'White'}}><b><u>Covid-19 tracker app</u></b></p>
        
        <div>
          <Cards>
            <div><CountryPicker title="India"/></div>
          </Cards> 
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

You need to pass children as a props to Cards, like this:

 const Cards = ({ children }) => {
    return(
        <div class="Cards">
            <p>Cards</p>
            {children}
        </div>
    );
 }