Styling only few elements while mapping an array in React.js

Question

If you could help me with this one that would be very helpful as I spent many hours on it.

I've got array of hours, I'm mapping it and returning list items. The thing is that I want to highlight/color only those items which are in the other array(hours2).

Here's chunk of my code:

const hours = ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00"];

const hours2 = ["11:00", "12:00"];

const renderedHours = hours.map(item => (
  <li
    style={{
      backgroundColor: item === hours2.map(item => item) ? "yellow" : "pink"
    }}
    // above I would like to select only those items which are equal to items from second array, but that does not work.

    key={item}
    className="hoursListItem"
    onClick={e => {
      this.handleClick(e);
    }}
  >
    {item}
  </li>
));

Thank you in advance!

Answer 1

Just search for the value in the second array using indexOf , which returns the index or -1 if the element cannot be found:

const renderedHours = hours.map(item =>
        <li 
            style={{'backgroundColor': hours2.indexOf(item) > -1 ? 'yellow' : 'pink'}}

            key={item} 
            className="hoursListItem"
            onClick={(e) => {this.handleClick(e)}}
        >
            {item}
        </li>)

Here the items in hours2 will have a yellow background and the others a pink one.

Answer 2

You can use Javascript some method to check if element exists in the array:

const hours = ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00"];

const hours2 = ["11:00", "12:00"];

const renderedHours = hours.map(item => {
  const styles = {
    backgroundColor: hours2.some(h => h === item) ? "yellow" : "pink"
  }

  return (
    <li
      style={styles}
      key={item}
      className="hoursListItem"
      onClick={e => {
        this.handleClick(e);
      }}
    >
      {item}
    </li>
  );
});

Answer 3

You can use includes() method to check if current item is inside array2 .

style={{'backgroundColor': hours2.includes(item) ? 'yellow' : 'pink'}}

If you just want background-color on items found in the array2 you can use this.

style={{'backgroundColor': hours2.includes(item) && 'yellow'}}

 const hours = [ '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']; const hours2 = ['11:00', '12:00']; const RenderedHours = () => hours.map(item => <li style={{'backgroundColor': hours2.includes(item) ? 'yellow' : 'pink'}} key={item} className="hoursListItem" onClick={(e) => {this.handleClick(e)}}>{item} </li>) ReactDOM.render( <RenderedHours />, document.getElementById('root') ); 

 <script src="https://unpkg.com/react@16.3.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js"></script> <div id="root"></div> 

Answer 4

我将使用该类来执行此操作，而不要使用这样的内部样式：

className={`hoursListItem ${hours2.includes(item) ? 'true' : 'false' }`}