Readdy Write

Render Style in React

23.02.2021 (๐Ÿ‘6201)


 

How to bring a Style element in React into the Render() path?

 

Wrong:

render() {

return (

..

<p style="background:red">HTML Content</p>

 

 

Solution:

<p style={{ background: 'red' }}>HTML Content</p>

 

 

 

 

Error message in React at <p Style="background:red" >

 

 

ร—

Unhandled Rejection (Error): The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. in p (at Article.js:97) in div (at Article.js:89) in div (at Article.js:78)

in Article (created by Context.Consumer)

in Route (at App.js:22) i

n div (created by Container)

in Container (at Layout.js:12)

in div (at Layout.js:10)

in Layout (at App.js:20)

in App (at src/index.js:13)

in Router (created by BrowserRouter)

in BrowserRouter (at src/index.js:12)

โ–ถ 25 stack frames were collapsed.

Article.populateData

D:/Programmierung/Web/Demo/CodeDocu/CodeDocu/ClientApp/src/components/Article.js:53

  50 |        //console.log("this.state=" + this.state);
 
 51 |        //console.log(this.state);
 
 52 |
> 53 |        this.setState(state => ({
 
    | ^  54 |            idarticle   :data.idArticle,
 
 55 |            iduser      :data.idUser,
 
 56 |            title       :data.title,

View compiled

 

 

 


0,00 €