Chris Chris - 7 days ago 6
React JSX Question

Using props in React style attribute

(I am using JSX with ES6 syntax)

This works:

render() {
return (
<div style={{ width: '95%' }}></div>
)
}


This doesn't work: (why not?)

render() {
return (
<div style={{ width: this.props.progress + '%' }}></div>
)
}

Answer

Most likely this.props.progess is not set to an appropriate value. Provide a good default for this case:

render() {

  const { progress = 0 } = this.props;

  return (
    <div style={{ width: progress + '%' }}></div>
  )
}