Why is this inline style not working? My console logs: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. Is it because template literals converts everything into strings?

Why is this inline style not working? My console logs: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. Is it because template literals converts everything into strings?

• javascript
• reactjs

Share Improve this question Follow edited Jul 24, 2018 at 14:27 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jul 24, 2018 at 14:20 cyruslkcyruslk 86933 gold badges1313 silver badges2929 bronze badges 2

• 2 Please include your code in text form instead of an image. style takes an object, not a string. – Tholle Commented Jul 24, 2018 at 14:22
• It's even worth editing your question to remove the image of text. Code is text; post text. – Dave Newton Commented Jul 24, 2018 at 16:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If you are using Template string, you can use like this

style={{ right: `${triggerNode.right+ 50}px`, left: `${triggerNode.left}px` }}

The style prop takes an object, so you want either { right: 0 } or { left: 0 }. You could solve this by using a puted property name instead of a template string:

const randomLeftOrRight = { [returnRandom()]: 0 };

const randomLeftOrRight = { [returnRandom()] : 0 };