Adding style to an array of react components

Question

I want to add inline style to an array of React Components, anyone know how best to do this without adding the height directly into the 'ProductComponent'?

The component has three nested divs I just want to add the style to the parent div for each component in the array. I want to do this in a ScrollableList component which takes an array of ProductComponents. I want to add "height:33%" on each ProductComponent.

My 'ProductComponent'.

  class ProductComponent extends Component {
    render() {      
      return (
            <div
              className="productContainer"
              key={id}
            >
              <div className="imageContainer" >
                <img src={ImageURL} role="presentation" />
              </div>
              <div className="productDetails">
                <div className="productName"><strong>{Name}</strong></div>
                <div className="productPrice">£ {Price}</div>
                <div className="productBuyButton">
                </div>
              </div>
            </div>
          );
      }
  }

I have an array of these components I'm using as children in another ScrollableList component.

render(){
  const array = this.props.children
  const children = array.map(ProductComponent => { 
     return(
      add style 'height:33%' to the div productContainer  
  }
  return(
   <div>
     {children}
   </div>
  )
}

Why do you want to add inline style instead of just adding a class the has the style associated with it? — jaybee
– jaybee, Commented Jan 26, 2017 at 2:57

branks · Accepted Answer · 2017-01-11 10:34:21Z

4

Okay, I found what I was looking for in the React Docs.

{children.map(element => {
  return (
    <element.type
      {...element.props}
      style={{
        height: '33%',
      }}
    />
  )
})}

Allows me to assign style inline to each component in the array. An example on codepen

edited Jan 11, 2017 at 10:34

branks

1067 bronze badges

answered Jan 11, 2017 at 10:31

Tormod Smith

9311 gold badge8 silver badges20 bronze badges

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

1 Comment

mistenkt Over a year ago

Best answer! Did exactly what i wanted.

otajor · Accepted Answer · 2017-01-06 17:20:47Z

3

If it's always going to be height: 33% or some other known styles then can't you just hardcode it into the component?

Like:

const product = (props) =>
        <div
          className="productContainer"
          style={{height: '33%'}}   // This should work?
          key={id}
        >
          <div className="imageContainer" >
            <img src={ImageURL} role="presentation" />
          </div>
          <div className="productDetails">
            <div className="productName"><strong>{Name}</strong></div>
            <div className="productPrice">£ {Price}</div>
            <div className="productBuyButton">
            </div>
          </div>
        </div>

Alternatively you could just put it in your CSS:

.productContainer {
  height: 33%;
}

If you want to pass down the height from the scrollable list component you could do this:

Scrollable List

render(){
 return (
   <div>
     {this.props.children.map((component) =>
       <div style={{height: '33px'}}>component</div>)}
   </div>
}

edited Jan 6, 2017 at 17:20

answered Jan 6, 2017 at 14:52

otajor

9531 gold badge7 silver badges21 bronze badges

4 Comments

Tormod Smith Over a year ago

I want to determine the height of each product in the ScrollableList Component not the ProductComponent.

otajor Over a year ago

When are you creating the array of children? Maybe you can pass in the height as a prop at that point?

Tormod Smith Over a year ago

I wanted to make Scrollable list reusable, and let it take a prop that determines the height of the scrollable window. so didin't want to add the scroll to ProductComponent. This is the best I have so far.

render(){     const array = this.props.children     array.forEach(function(ProductComponent){     return (     <div style=“height:33%”>        <ProductComponent />     </div>     )   }  return(    <div>      {array}    </div>  ) }

otajor Over a year ago

Edited to add another option - similar to what you're describing but more functional?

Ajackster · Accepted Answer · 2017-01-06 22:07:25Z

The best way would be to send height down as a prop to each component and set a default of 33%.

const arrayOfProducts = this.props.children;
arrayOfProducts.map((product) => {
       <div
          style={{ height: product.height || 33% }}
          className="productContainer"
          key={id}
        >
          <div className="imageContainer" >
            <img src={product.ImageURL} role="presentation" />
          </div>
          <div className="productDetails">
            <div className="productName"><strong>{product.Name}</strong></div>
            <div className="productPrice">£ {product.Price}</div>
            <div className="productBuyButton">
            </div>
          </div>
        </div>
})

This way when you declare the array you can override 33% with whatever you'd like as long as it is a valid height value like so.

const arrayOfProducts = [
  {
    ImageUrl: 'exampleImgUrl',
    Name: 'exampleName',
    Price: '$3.00'
  },
  {
    height: 25px,
    ImageUrl: 'exampleImgUrl',
    Name: 'exampleName',
    Price: '$3.00'
  },
]

If you were to use this data, the first ProductComponent would have a height of 33% and the second would have a height of 25px. Hope this helps!

Collectives™ on Stack Overflow

Adding style to an array of react components

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related