si está hablando de agregar diferentes clases al resultado mapeado:

 const sports = [{ //object id: 1, name: 'A', class:"class1" }, { id: 2, name: 'B', class:"class2" }, { id: 3, name: 'C' class:"class3" } ] const sportList = sports.map(sport => ( //mapped results in a new array sportsList <div className = {sport.class} > <div className = "show" > {sport.name} < /div> <div className = "channel-time" > {dStart.getHours() + ':' + dStart.getMinutes() + ' - ' + dEnd.getHours() + ':' + dEnd.getMinutes()} </div> </div> )) return ( < > <div className = "show-div" > <div className = "show-item-name" > <div className = "show-test2" > {sportList} </div> </div> </div> </> )

Dentro de la función de devolución de llamada del mapa, puede generar un nombre de className único a partir del índice actual en la matriz.

p.ej

 className={`show-test show-test-${i}`}

 const sports = [ { id: 1, name: "A" }, { id: 2, name: "B" }, { id: 3, name: "C" } ]; const App = () => { return ( <> {sports.map((sport, i) => ( <div className={`show-test show-test-${i}`}> <div className="show"> {sport.name} </div> </div> ))} </> ); }; export default App;

Puedes hacer lo mismo con cualquier atributo, como el style .

 const sports = [ { id: 1, name: "A" }, { id: 2, name: "B" }, { id: 3, name: "C" } ]; const App = () => { return ( <> {sports.map((sport, i) => ( <div className="show-test" style={{ marginLeft: i * 20 + "px" }} > <div className="show"> {sport.name} </div> </div> ))} </> ); }; export default App;

No estoy seguro de dónde está tratando de agregar className en este ejemplo. Pero si está dentro de este mapa, puede encontrar el índice agregando index en los argumentos de .map , por ejemplo

 const sportList = sports.map((sport, index) => ( //mapped results in a new array sportsList <div className = `show-test your-class-${index}` > <div className = "show" > {sport.name} < /div> <div className = "channel-time" > {dStart.getHours() + ':' + dStart.getMinutes() + ' - ' + dEnd.getHours() + ':' + dEnd.getMinutes()} </div> </div> ))