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;

akhtarvahid · Accepted Answer · 2021-06-15 11:07:49Z

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>
    );
 }

edited Jun 15, 2021 at 11:07

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

answered Jun 15, 2021 at 10:51

Jacki

6725 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React js Calling Component inside component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related