Question

166

Adding style stored in a variable inside React class

rated 0 times [ 167] [ 1] / answers: 1 / hits: 49529 / 7 Years ago, wed, february 15, 2017, 12:00:00

I'm trying to use some style inside my React class. I have done it before doing:

<div style={{background: red}}></div>

I want to use a variable instead, for example:

<div style={divStyle}></div>

My code looks like:

class HolaMundo extends React.Component {

  const divStyle = {

    color: 'blue',

  };

  render() {

    return(

      <div className=container style={divStyle}> 

        <h1> Hola {this.props.name}</h1>

      </div>

    );

  }

}



ReactDOM.render(<HolaMundo name=One />, document.getElementById(app));

But the styles are not applied. How can I achieve this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

albert

Add To Favorites

Follow

Total Points: 652

Total Questions: 105

Total Answers: 108

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

albert questions

1 MUI v5 - Extending Typography variant in TypeScript creates error No overload matches this call

Wed, Nov 17, 21, 00:00, 3 Years ago

1 Update one, insert if not exists and modify only when a condition is true MongoDB

Thu, Mar 19, 20, 00:00, 4 Years ago

1 React - input loses focus on keypress

Sat, Nov 9, 19, 00:00, 5 Years ago

1 Multiple select fields filtering with jQuery

Thu, Oct 24, 19, 00:00, 5 Years ago

1 How to update redux state using a react variable passed up to the component from a child

Wed, Sep 25, 19, 00:00, 5 Years ago

View All

answered 7 Years ago austynp · Accepted Answer

You can't define a constant in the middle of a class, that's invalid syntax. Class bodies, by definition¹, can only contain method definitions, static method definitions, and empty statements (;)². Define the divStyle inside a method:

class HolaMundo extends React.Component {

    render() {

        const divStyle = {

            color: 'blue',

        };



        return (

          <div className=container style={divStyle}> 

            <h1>Hola {this.props.name}</h1>

          </div>

        );

    }

}

¹Per the ECMAScript 2015 Language Specification, Section 14.5 - Class Definitions

²Babel currently supports class properties (with plugins). You can also assign an instance variable through the constructor, with this.style = { ... } and access it anywhere in the class with this.style.