Styling a part of an array in JSX

Question

I have an array,

const arr = [
  { age: 1, name: 'Raphael' },
  { age: 3, name: 'Inyang' },
  { age: 6, name: 'Ifiok' },
  { age: 8, name: 'Ekpedeme' }
];

I need ages above 5 to have an opacity of 0.5, while the rest will have an opacity of 1

function changeOpacityOfArray(letter) {
        if (arr.age >= 5 ) {
      letter.style.opacity= '0.5';
    }
  
}

changeOpacityOfArray(arr);

The above doesn't work in JSX,

it says cannot style an undefined element

Then in the HTML body, note the opacity in the styling

<ul style={{listStyleType: 'none'}}>
    {arr.map(function(item){
         return (<li><div style={{display: 'flex', justifyContent: 'flex-start', width: 'auto', fontSize: 'calc(4px + 2vmin)', opacity: 1, justifyContent: 'flex-start' }}><p>{item.name}: {item.age}</p></div></li>)
      }
       )}

       </ul>

Voting to close because the problem is caused by a typo. The property name is opacity not Opacity. JavaScript is case-sensitive. — Quentin
– Quentin, Commented Oct 12, 2020 at 8:43

Gh05d · Accepted Answer · 2020-10-12 08:40:22Z

3

Why don't you move the age check into the style prop?

{arr.map(function (item) {
      return (
        <li>
          <div
            style={{
              display: "flex",
              justifyContent: "flex-start",
              width: "auto",
              fontSize: "calc(4px + 2vmin)",
              opacity: item.age > 5 ? 0.5 : 1,
              justifyContent: "flex-start",
            }}
          >
            <p>
              {item.name}: {item.age}
            </p>
          </div>
        </li>
      );
    })}

Also you have a typo in the opacity prop, you have to write it in lowercase

answered Oct 12, 2020 at 8:40

Gh05d

9,08211 gold badges42 silver badges84 bronze badges

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

3 Comments

Raphael Inyang Over a year ago

wow, i never thought of this, i'll try and get back to you

Raphael Inyang Over a year ago

it was actually a typo

Raphael Inyang Over a year ago

But i need only the part of the array that above 5, to be given the opacity, not the whole array

Iosif · Accepted Answer · 2020-10-12 08:39:45Z

1

When styling the div you can check the item's age and set the opacity accordingly.

const arr = [
  { age: 1, name: 'Raphael' },
  { age: 3, name: 'Inyang' },
  { age: 6, name: 'Ifiok' },
  { age: 8, name: 'Ekpedeme' },
];

<ul style={{ listStyleType: 'none' }}>
  {arr.map(function (item) {
    return (
      <li>
        <div
          style={{
            display: 'flex',
            justifyContent: 'flex-start',
            width: 'auto',
            fontSize: 'calc(4px + 2vmin)',
            opacity: item.age > 5 ? 0.5 : 1,
            justifyContent: 'flex-start',
          }}>
          <p>
            {item.name}: {item.age}
          </p>
        </div>
      </li>
    );
  })}
</ul>;

answered Oct 12, 2020 at 8:39

Iosif

8224 silver badges15 bronze badges

3 Comments

Raphael Inyang Over a year ago

for this, the whole list will be affected, not only part of the list affected by the condition

Iosif Over a year ago

you are just defaulting to opacity 1 for the other items in the list and just setting 0.5 for the ones with age > 5.

Raphael Inyang Over a year ago

it worked, so how will I make more research on it, like what is the name of the process

Collectives™ on Stack Overflow

Styling a part of an array in JSX

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related