如何添加不同的文本后，地图功能已渲染3次?

Question

我想在渲染三次之后添加一些文本。这些卡片使用split和map从本地json文件中获取值。我还想每渲染三次更改一次文本。

import React from 'react';
import data from '../data.json';
import { Card,Button } from 'react-bootstrap';
function Med() {

return (
<div>
{data.slice(0,6).map((item)=>{
return (
<div>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{item.Name}</Card.Title>
<Card.Text>
This is the explaination of product card.
</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>                           
</div>   
)

})}       
</div>
)
}
export default Med;

这是我当前的输出。但是我想在chris的卡片后面显示一些文字

Answer 1

{data.slice(0,6).map((item,index)=>{//use the index to conditionally render })}

编辑#1 -所以，看完你的评论后，也许这段代码会给你一个想法

{data.slice(0, 6).map((item, index) => {
return (
<div>
{index < 3 ? <h1>First three</h1> : <h1>From Fourth</h1>
</div>
);
})}