I have a styles object
let styles = {
step_div:{
height:'150px',
}
}
I'm trying to display multiple div elements with different colors using React
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'}]
When I try to set the border color dynamically based on each item's color property from the array, I encounter an error
make_structure(){
let rows = []
let data = this.state.steps_array
data.forEach((i, key)=>{
let style = Object.assign({}, 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
}
The error message reads:
TypeError: Cannot assign to read only property 'border' of object '#<Object>'