REACT JSX styles [object object]

Question

i'm studying about React but don't understand the JSX Styles. here code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="disp"></div>
    <script type="text/babel">
        var root = document.querySelector('#disp')
        const cssStyle = {
            'color': 'red',
            'backgroud-color': '#fff0f0',
            'font-size':'2em'
        }
        const scriptStyle = {
            color: 'blue',
            backgroundColor: '#fff0f0',
            fontSize: '2em'
        }
        function getDOM() {

            return (
                <div> 
                    <div style={scriptStyle}>
                        Look at the stars
                    </div>
                    <p stlye={cssStyle}>
                        Look how they shine for you
                    </p>
                </div>
            )
        }
        ReactDOM.render(getDOM(), root)
    </script>
</body>
</html>

Issue

scriptStyle is good but I can not see cssStyle normally. [object object] so how can I?

You have a typo, stlye instead of style. Also backgroud-color instead of background-color — Santiago Pernigotti
– Santiago Pernigotti, Commented Nov 18, 2018 at 13:39

Shubham Khatri · Accepted Answer · 2018-11-18 13:40:46Z

In JSX, styles are provided as an object, with keys being camelCase instead of snakeCase. For instance background-color will be written as backgroundColor which is exactly how it is being provided in scriptStyle object and that is how it needs to to given to the style. Apart from it you also have a typo in style={cssStyle}

Working demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="disp"></div>
    <script type="text/babel">
        var root = document.querySelector('#disp')
        const cssStyle = {
            'color': 'red',
            'backgroudColor': '#fff0f0',
            'fontSize':'2em'
        }
        const scriptStyle = {
            color: 'blue',
            backgroundColor: '#fff0f0',
            fontSize: '2em'
        }
        function getDOM() {

            return (
                <div> 
                    <div style={scriptStyle}>
                        Look at the stars
                    </div>
                    <p style={cssStyle}>
                        Look how they shine for you
                    </p>
                </div>
            )
        }
        ReactDOM.render(getDOM(), root)
    </script>
</body>
</html>

Docs Link

Rodrigo Martín de Lamo · Accepted Answer · 2018-11-18 13:40:31Z

3

You have a typo:

<p stlye={cssStyle}>
     Look how they shine for you
</p>

It should be <p style=

answered Nov 18, 2018 at 13:40

Rodrigo Martín de Lamo

1817 bronze badges

Comments

Daniel · Accepted Answer · 2018-11-19 02:19:43Z

If you are using Atom code editor try writing out some conventional HTML styling like so:

const App = () => {
  return (
    <div>
      <label class="label" for="name">Enter name:</label>
      <input id="name" type="text" />
      <button style="background-color: blue; color: white;">Submit</button>
    </div>
  );

};

You will get a message saying that "Style prop must be an object" and you can read more about it here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md

So what does that all mean?

We have to change the syntax a bit. I am still going to say style equals, but after that, you need two curly braces one inside another.

The outer curly brace indicates we want to reference a javascript variable inside the jsx, the second set of curly braces within it, is meant to indicate a javascript object.

So when styling with jsx rather than providing a string like above, we instead provide a javascript object where all the keys to the object represent a different property we want to style. The values indicate the value for that particular styling.

Also, when providing a property name like background-color, you are going to remove the dash and capitalize the second word like so: backgroundColor. This is called camel case.

So in general, the conversion is straightforward, just remove the double quotes, replace them with curly braces and then if you have a compound property name, remove the dash and do a capitalization. So with that in mind, I want you to give a shot to updating the style property here.

So the above code now looks like this:

const App = () => {
  return (
    <div>
      <label class="label" for="name">Enter name:</label>
      <input id="name" type="text" />
      <button style={{ backgroundColor: blue; color: white; }}>Submit</button>
    </div>
  );

};

Collectives™ on Stack Overflow

REACT JSX styles [object object]

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related