-1

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>
      </>
    )
4
  • 1
    can you explain more about your problem? what is your expectation?
    – nima
    Sep 29, 2021 at 10:51
  • 1
    please take a moment and read this article stackoverflow.com/help/how-to-ask about how to asking questions also read this article stackoverflow.com/help/minimal-reproducible-example about how to ask a good question with minimum requirement. Good luck 🙂
    – nima
    Sep 29, 2021 at 10:51
  • @novonimo I want to style the returned mapped data.
    – user13044395
    Sep 29, 2021 at 10:54
  • @novonimo Sorry will keep it in mind. Thanks
    – user13044395
    Sep 29, 2021 at 10:55

3 Answers 3

1

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

I'm not sure exactly where you are trying to add the className in this example. But if it is inside this map then you can find the index by adding index into the .map args, e.g.

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

Within the map callback function, you can generate a unique className from the current index in the array.

eg

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;

Edit eager-cache-c4vih

You can do the same thing with any attribute, such as 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;

Edit hardcore-voice-h1qn0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy