CODEWITHSUNDEEP
javascriptcssreactjsuser-interfacefrontend
Jessie
Jessie

Reputation: 91

Using State Variables in Inline Styling

I would like to use a state variable in my inline styling as such:

const styles = {
progressText1: {
    fontSize: this.state.text1Size
  }
};

constructor(props, context) {
    super(props, context);
    this.state = {
      text1Size: "300%"
    };
};

...So that I can reset it on window resize. I am getting the error "undefined has no properties". Does anyone know what is wrong?

Thanks!

Upvotes: 1

Views: 915

Answers (1)

thinhvo0108
thinhvo0108

Reputation: 2242

Move the const styles into your render function, just before your return

It may look like this:

render() {
  const styles = {
    progressText1: {
      fontSize: this.state.text1Size
    }
  }; 
  return (
    <div style={styles.progressText1}></div>
  )  
}

Upvotes: 1

Related Questions