converting a functional component to a class component

Question

I wrote this code which works

function Circle(props) {
   var style = {
      backgroundColor: "white",
      border: "1px solid black",
      borderRadius: "100%",
      paddingTop: "98%"
   }
   return (<div style={style}></div>)
}

But I want to write it as a class component so I tried

class Circle extends React.Component {         
   var style = {
      backgroundColor: "white",
      border: "1px solid black",
      borderRadius: "100%",
      paddingTop: "98%"
   };   
   render() { return(
      <div style={style}></div>
   )}
}

The error I get is

SyntaxError: Inline Babel script: Unexpected token, expected ( (3:13)
  1 | 
  2 |       class Circle extends React.Component {         
> 3 |          var style = {

I googled a fair amount and found articles like these

https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00

Based on this I tried various keywords like static cost and let but nothing seems to work.

Coming from java world, why can't I have the style as the property of my class?

don't flame me I just started to learn react and I did google before asking.

https://codepen.io/knows_not_much/pen/mXXEov

you aren't returning anything from render

Daniel A. White
– Daniel A. White

2018-02-19 01:40:11 +00:00
Commented Feb 19, 2018 at 1:40 — Daniel A. White
– Daniel A. White, Commented Feb 19, 2018 at 1:40
updated my question.

Knows Not Much
– Knows Not Much

2018-02-19 01:42:13 +00:00
Commented Feb 19, 2018 at 1:42 — Knows Not Much
– Knows Not Much, Commented Feb 19, 2018 at 1:42
var is not valid ins a class definition.

Daniel A. White
– Daniel A. White

2018-02-19 01:48:55 +00:00
Commented Feb 19, 2018 at 1:48 — Daniel A. White
– Daniel A. White, Commented Feb 19, 2018 at 1:48

Daniel Conde Marin · Accepted Answer · 2018-02-19 01:57:16Z

3

That is not valid as per ES6 class spec.

You can initialise your style in the constructor instead:

class Circle extends React.Component {       
   constructor(props) {
     super(props);
     this.style = {
       backgroundColor: "white",
       border: "1px solid black",
       borderRadius: "100%",
       paddingTop: "98%"
     };
   }     
   render() { return(
      <div style={this.style}></div>
   )}
}

or of course just outside the class:

const style = {
      backgroundColor: "white",
      border: "1px solid black",
      borderRadius: "100%",
      paddingTop: "98%"
};

class Circle extends React.Component {       
   render() { return(
      <div style={style}></div>
   )}
}

or yet another approach, a getter:

class Circle extends React.Component {

   get style() {
      return {
          backgroundColor: "white",
          border: "1px solid black",
          borderRadius: "100%",
          paddingTop: "98%"
      };
   }

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

edited Feb 19, 2018 at 1:57

answered Feb 19, 2018 at 1:53

Daniel Conde Marin

7,7324 gold badges38 silver badges44 bronze badges

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

1 Comment

Daniel Conde Marin Over a year ago

my bad - forgot it was a react component class - updated my answer

Daniel A. White · Accepted Answer · 2018-02-19 01:52:48Z

0

var is not valid in the class definition space. you can simply leave it off:

class Foo {
   style = "bar";
}

var foo = new Foo();
console.log(foo.style);

answered Feb 19, 2018 at 1:52

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Collectives™ on Stack Overflow

converting a functional component to a class component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related