Return items of mapped array with unique styling elements

Issue

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>
      </>
    )

Solution

if you are talking about adding diffrent classes to mapped result:

     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>
      </>
    )

Answered By – Ganesh Mohanty

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0