CODEWITHSUNDEEP
javascriptreactjs
Murakami
Murakami

Reputation: 3760

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

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!

Upvotes: 0

Views: 1473

Answers (4)

T.sagiv
T.sagiv

Reputation: 325

I would use the class to do that and not with the inner style like that:

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

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>

Upvotes: 1

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

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>
  );
});

Upvotes: 1

Tom Fenech
Tom Fenech

Reputation: 74595

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.

Upvotes: 1

Related Questions