CODEWITHSUNDEEP
cssjsonreactjs
Aloalo
Aloalo

Reputation: 167

Inline style based off JSON value React

I am pulling in JSON and mapping it successfully in a React component. However one of the JSON values is a HEX and I want to apply that HEX as an inline style to the background color of one of my divs.

I have tried a bunch of ways but I though it could be done like this. 

<div className="ribbon-wrapper">
 <div className="ribbon" style={{backgroundColor: {item.color.tint}}}></div>
</div>

This throws a Syntax error: Unexpected token, expected , error. Is there a better way to do this?

Upvotes: 0

Views: 1814

Answers (2)

topher
topher

Reputation: 14860

Your style value is a Javascript object so you don't need to escape item.color.tint. You can pass it in directly:

<div className="ribbon" style={{backgroundColor: item.color.tint}}></div>

Upvotes: 2

Prakash Sharma
Prakash Sharma

Reputation: 16482

Just directly pass it without brackets like this

<div className="ribbon" style={{backgroundColor: item.color.tint}}></div>

Upvotes: 1

Related Questions