CODEWITHSUNDEEP
reactjs
Gowtham Koushik
Gowtham Koushik

Reputation: 274

Using multiple Style attributes inside react

<div className="col-md-9">
           <span style={{color:this.props.todo.done ?'#e6e6e6' : '#4d4d4d'},
                        {textDecoration: this.props.todo.done ? '#e6e6e6 line-through' : 'none'}
                    }
           >
               {this.props.todo.value}
           </span>
</div>

I know the above one is wrong, but is there anyway to add multiple style attributes inside the span tag and make it work. As you can see I want both of them to work. Thank you

Upvotes: 0

Views: 883

Answers (2)

Amruth
Amruth

Reputation: 5912

Still you can optimize code like this, so that your render method looks neat.

Create variable of style JSON object.

const customStyle = {
  color: this.props.todo.done ? "#e6e6e6" : "#4d4d4d",
  textDecoration: this.props.todo.done ? "#e6e6e6 line-through" : "none"
};

Pass customStyle object as props to style element.

<div className="col-md-9">
   <span style={customStyle}>{this.props.todo.value}</span>
</div>;

Upvotes: 1

Igor Alemasow
Igor Alemasow

Reputation: 4899

try this, i just removed redundant curly drackets

<div className="col-md-9">
       <span style={
                     {
                       color:this.props.todo.done ?'#e6e6e6' : '#4d4d4d',
                       textDecoration: this.props.todo.done ? '#e6e6e6 line-through' : 'none'
                     }
                }
       >
           {this.props.todo.value}
       </span>
</div>

Upvotes: 1

Related Questions