React styles prop returns [object object] for an array?

Question

I've got this very basic component:

Tile = React.createClass({
    render: function(){
        var styles = [
            TileStyles.tile
        ];
        return (
            <div style={styles} test="test" />
        );
    }
});

Unfortunately it is producing this html:

<div style="0:[object Object];" data-reactid=".0.$0"></div>

Why does it give me [object object] instead of the inline styles? Obviously I don't need to use an array here but I do on a more complex component.

What am I doing wrong?

UPDATE: Thanks for the answers guys but the issue is I WANT to be able to use multiple styles.

aka use TileStyles.tile and TileStyles.active under certain circumstances.

check your browser console - it should be generating an error along the lines of "you must pass a style object". You can't pass an array into the JSX style attribute. — Mike 'Pomax' Kamermans, May 01 '15 at 21:39
gotcha... I can do this on react-native so I assumed I could here as well. Oh will thanks for the help guys — gbachik, May 01 '15 at 21:52
I ran in to this issue because I got linked to this article: https://github.com/reactjs/react-future/blob/master/04%20-%20Layout/04%20-%20Inline%20Styles.md without noticing it was about react-future. Glad you brought it up here. — Ted A., Oct 16 '15 at 00:30

Emil Ingerslev · Accepted Answer · 2016-03-29T07:34:20.453

5

The problem is (as already stated) that you give the style property an array, but an object is expected. So simply changing the code to this:

Tile = React.createClass({
    render: function(){

        var style = _.extend({},TileStyles.tile,TileStyles.active);

        return (
            <div style={style} test="test" />
        );
     }
});

Here _ is a dependency on either lodash or underscore. This will work if you defined TileStyles as something like:

var TileStyles = {
    tile: { width: '200px', height: '200px', backgroundColor: 'blue' },
    active: { backgroundColor: 'green' }
}

If you don't want a dependency on _, it is possible to do it by hand, but it can be a hassle.

Update 2016-03-29: Instead of relying on a dependency like lodash or underscore or doing it by hand, you can use the new Object.assign feature in ecmascript 2015.

var style = Object.assign({},TileStyles.tile,TileStyles.active);

Or take the example fully updated to ecmascript 2015:

class Tile extends React.Component {
    render() {
        const style = Object.assign({},TileStyles.tile,TileStyles.active);
        return <div style={style} test="test" />;
    }
}

edited Mar 29 '16 at 07:34

answered May 01 '15 at 22:59

Emil Ingerslev

4,645
2
24
18

Thanks but the issue is I WANT to be able to use multiple styles. aka use TileStyles.tile + TileStyles.active. – gbachik May 02 '15 at 02:13
Like controlling it by a state variable? If so, I've have a minor change to the answer. – Emil Ingerslev May 02 '15 at 06:52
Oh, I think I get it know. You want to stack styles like in css, right? – Emil Ingerslev May 02 '15 at 06:54
Yep exactly! I actually came to the same solution you updated to an hour back! Thanks for the validation <3 – gbachik May 02 '15 at 07:10
1

No problem, glad we found the right solution :) If you want, you can improve this to use prebuilt styles with same power, by using extend to prebuild the TileStyles object. – Emil Ingerslev May 02 '15 at 08:26

score 3 · Answer 2 · answered May 01 '15 at 21:37

3

React is expecting an object to be passed as styles argument, not an array, so you will need to change it to

Tile = React.createClass({
    render: function(){
        return (
            <div style={TileStyles} test="test" />
        );
    }
});

You will have to make sure that TileStyles returns an (or is an) object and is accesible within the scope, otherwise, create a function in the class scope and call it with

this.TileStyles()

answered May 01 '15 at 21:37

baao

71,625
17
143
203

Thanks but the issue is I WANT to be able to use multiple styles. aka use TileStyles.tile + TileStyles.active. – gbachik May 02 '15 at 02:14

React styles prop returns [object object] for an array?

2 Answers2