Quiero agregar algo de texto después de que las tarjetas se hayan renderizado tres veces. estas tarjetas toman valor de un archivo json local usando split y map. También quiero cambiar el texto cada tres veces que se haya renderizado el componente.
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;Esta es mi salida actual. pero quiero que muestre algo de texto después de la tarjeta de chris.
{data.slice(0,6).map((item,index)=>{//use the index to conditionally render })}
Edición n. ° 1: luego de leer su comentario, tal vez este código le dé una idea
{data.slice(0, 6).map((item, index) => { return ( <div> {index < 3 ? <h1>First three</h1> : <h1>From Fourth</h1> </div> ); })}