JSX add attribute to array of different objects

Question

I have a page with a bunch of sub-pages:

render(){
  let elements = [<Apple>,<Orange>,<Pear>];
  return <div>
    {Elements}
  </div>
}

I want to give each of these elements the same property, e.g. color:

render(){
  let elements = [<Apple>,<Orange>,<Pear>];
  elements.forEach(i=>i.setAttribute('color','blue')); //???
  return <div>
    {Elements}
  </div>
}

So that it would be equivalent to:

render(){
  return <div>
    <Apple color='blue'/>
    <Orange color='blue'/>
    <Pear color='blue'/>
  </div>
}

How would I do this?

bertdida · Accepted Answer · 2020-08-11 05:22:32Z

1

Fix your elements to

let elements = [Apple, Orange, Pear];

then use array map to pass a common prop.

render() {
  let elements = [Apple, Orange, Pear];
  const elementsWithColorBlue = elements.map((Element) => (
    <Element color="blue" />
  ));
  
  return <div>{elementsWithColorBlue}</div>
}

edited Aug 11, 2020 at 5:22

answered Aug 11, 2020 at 5:16

bertdida

5,3282 gold badges19 silver badges23 bronze badges

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

Comments

Isaac · Accepted Answer · 2020-08-11 05:25:34Z

0

An alternate way of writing than the answer above would be as below

render(){
  return (
    <div>
      {[Apple, Orange, Pear].map(Element => <Element color="blue" />)}
    </div>
  )
}

answered Aug 11, 2020 at 5:25

Isaac

13k18 gold badges66 silver badges135 bronze badges

Collectives™ on Stack Overflow

JSX add attribute to array of different objects

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related