React.js return a style property from a function and use it inside the render() function

Question

Im trying to use a dynamic style property. The approach below throws me an "The style prop expects a mapping from style properties to values, not a string" error.

class someClass extends React.Component {
    someFunction = () => {
        return {marginLeft : 20 };
    }
    render() {
        return( <div style={this.someFunction}/>
        );
    }
}

Howerver this one works:

class someClass extends React.Component {
    render() {
        return( <div style={{marginLeft : 20}}/>
        );
    }
}

Why is that so and how can i return style objects from functions?

Thanks for any answers in advance!

Arup Rakshit · Accepted Answer · 2018-08-24 12:17:01Z

8

You didn't call the function inside the style props JSX. Call it like this.someFunction(), then it will return the object of style you kept inside the someFunction.

return <div style={this.someFunction()} />

answered Aug 24, 2018 at 12:17

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.js return a style property from a function and use it inside the render() function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related