mutable styles object for inline-style react components

Question

I have a styles obj

let styles = {
  step_div:{
    height:'150px',
  } 
}

I want to render some div objects that have each their own color

class Layout extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      steps_array:[
        {title:'Intro',
          types:['Gate Keeper', 'Target Prospect'],
          color:'blue'},
        {title:'Grab Attention',
          types:['Name Drop', 'Product Value'],
          color:'yellow'},
        {title:'Disqualify Statement',
          types:[],
          color:'yellow'}]

Looping through the array, adding the border color to the styles is giving me an error

  make_structure(){
    let rows = []
    let data = this.state.steps_array
    data.forEach((i, key)=>{
      let style = styles.step_div
      style.border="1px solid "+i.color //each items color property
      let row = (
        <Row>
          <div  style={style}>
            {i.title}
          </div>
        </Row>
      )
      rows.push(row)
    })
    return rows
  }

error

TypeError: Cannot assign to read only property 'border' of object '#<Object>'

Answer 1

You could try like this.

let style = {...styles.step_div,border:'1px solid'+i.color};