React duplicate component getting displayed using layout - reactjs

Question

I'm having trouble with React. I've read the documentation but I'm still confused as to what steps need to be taken.
I have created PrimaryLayout and using props children items is called. In the index file(Page) the PrimaryLayout is called and embedded card component.
However, in the output I am seeing duplicate components.
Appreciate your help.
Please find below code
PrimaryLayout.js
import React from 'react'
import Header from "../components/Header"
import FooterMessage from "../components/FooterMessage"
const PrimaryLayout = (props) => (
<div>
<Header/>
<div className="container">
<div className="row justify-content-md-center">
<div className="col-xs-6">
{props.children}
</div>
</div>
</div>
<FooterMessage/>
</div>
);
export default PrimaryLayout;
Card Component
import React from 'react'
import {Card, Button} from 'react-bootstrap'
const CardBox = (props) => (
<div className ="p-3">
<Card>
<Card.Img variant="top" src="https://loremflickr.com/640/360" />
<Card.Body>
<Card.Title>{props.titleFirst}</Card.Title>
<Card.Text>{props.description}</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card>
<Card.Img variant="top" src="https://loremflickr.com/640/360" />
<Card.Body>
<Card.Title>{props.titleSecond}</Card.Title>
<Card.Text>{props.description}</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
export default CardBox;
Index.js
import React from "react"
import CardBox from "../components/CardBox"
import PrimaryLayout from "../layouts/PrimaryLayout"
export default () => (
<PrimaryLayout>
<CardBox
titleFirst="This is my first post"
description = "We are writing something to be displayed in description"
/>
<CardBox
titleSecond="This is my first post"
description = "We are writing something to be displayed in description"
/>
</PrimaryLayout>
)

Answer 1

If I understand it correctly, this has to do with the CardBox component. Right now you create 2 Card components within the CardBox component. This means that for every CardBox component you'll get 2 Card components. The first Card with titleFirst and the description, the second Card with titleSecond and the description.
If you change the BoxCard component to display the Card only ones like so:
const CardBox = (props) => (
<div className ="p-3">
<Card>
<Card.Img variant="top" src="https://loremflickr.com/640/360" />
<Card.Body>
<Card.Title>{props.title}</Card.Title>
<Card.Text>{props.description}</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
and let the index.js use it like so:
export default () => (
<PrimaryLayout>
<CardBox
title="This is my first post"
description = "We are writing something to be displayed in description"
/>
<CardBox
title="This is my first post - second CardBox"
description = "We are writing something to be displayed in description"
/>
</PrimaryLayout>
);
Hope this is what you are looking for!