Conditionally apply single attribute in react?

Question

Is there a shorter/inline version of doing this in react, basically applying a single css attribute conditionally?

  setStyle () {
    const style = {
      display: 'flex',
      flexDirection: 'column',
      height: 485
    }
    if (this.state.zoom) {
      style.position = 'absolute'
    }
    return style
  }

  <div ref='container' style={this.setStyle()}>

Something in this context:

style={{
   display: 'flex',
   flexDirection: 'column',
   height: 485
   position: absolute // Make this conditional
 }}

azium · Accepted Answer · 2016-12-27 01:01:52Z

1

Using Object.assign

let style = Object.assign({
  display: 'flex'
}, this.state.zoom && { position: 'absolute' })

Using spread/rest properties

let style = {
  display: 'flex',
  ...this.state.zoom && { position: 'absolute' }
}

Inline, inline:

<div
  style={
    Object.assign({
      display: 'flex'
    }, this.state.zoom && { position: 'absolute' })
  }
/>

<div
  style={{
    display: 'flex',
    ...this.state.zoom && { position: 'absolute' }
  }}
/>

edited Dec 27, 2016 at 1:01

answered Dec 27, 2016 at 0:56

azium

20.7k8 gold badges63 silver badges81 bronze badges

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

1 Comment

Himmators Over a year ago

I was thinking if you could do it straight in the style attribute in the rendering, updating question.

Collectives™ on Stack Overflow

Conditionally apply single attribute in react?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related