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!

Tomasz Mularczyk · Accepted Answer · 2018-05-05 10:05:22Z

1

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

answered May 5, 2018 at 10:05

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Fenech · Accepted Answer · 2018-05-05 10:03:58Z

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.

answered May 5, 2018 at 10:03

Tom Fenech

75.1k13 gold badges119 silver badges154 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2018-05-05 10:11:19Z

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>

T.sagiv · Accepted Answer · 2018-05-05 10:24:45Z

0

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

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

answered May 5, 2018 at 10:24

T.sagiv

3252 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related