How to set different X values for every map element. [left='X' px]. In short how to set a new className [class in Vanilla Js] property to the map generated elements.
const sports = [ //objects
{
id: 1,
name: 'A',
},
{
id: 2,
name: 'B',
},
{
id: 3,
name: 'C'
}
]
const sportList = sports.map(sport => (//mapped results in array sportList
<div className = "show-test" >
<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>
</>
)