React: Failed to compile

Question

Okay So i have multiple question, (more or less basic ones)

First Question: When I do something like

class App extends Component {
  state = {
    person: [
    {id: "name1n", name: "Rohit", age: 24},
    {id: "name2l", name: "Hariom", age: 23},
    {id: "name3g", name: "Vaibhav", age: 58}
  ],
  someOtherState: "Untouched state",
  showPerson: false
}


var apple = 10; 

Before render, it throws an error saying failed to compiler var apple but if I do same thing inside render like render( var apple = 10; ); it does not throw the error. Can someone please explain the reason for same?

Second Question Inside render, when I do something like this

  render() {
const style = {
  width: '150px',
  margin: 'auto',
  color: 'white',
  padding: '5px',
  backgroundColor: 'green',
  marginBottom: '10px'
};

var apple = 10;
console.log(apple) // -> This log
    let person = null;
    if (this.state.showPerson) {
      person= (
        <div>
          {
            this.state.person.map((el, index) => {
              return <Person
              key={el.id}
              click={this.deletePersonHandler.bind(index)}
              name={el.name}
              age={el.age}
              changed={(event) => this.eventSwitchHandler(event, el.id)} />
            })
          }
       </div>
     );
    style.backgroundColor = 'red'
    apple = 20;
    console.log(apple) // -> This log
    }
  return (
  <div className="App">
        <h1> Hi I am react App</h1>
        <button style={style}
        onClick={this.togglerPersonHandler}>Button</button>
        {person}
    </div>
     )
   }
}

it logs 10 twice in console before displaying 20, The question being why is it displaying the number 10 twice before displaying 20? Shouldn't it just console.log -> 10 and then 20? instead of 10 -> 10 -> 20?

Third Question when I click on button it changes the BackgroundColor to red and when I again click it, it reverts back to green colo This is my togglePersonHandler which changes the state (showPerson) of If condition when button is clicked

togglerPersonHandler = () => {
  const doesShow = this.state.showPerson;
  this.setState({
    showPerson: !doesShow
  });
}

My third question is, Why does it changed by itself to its original color (green) when I click it back again? I usually used to do it with else condition

Answer 1

It is always a better practise to ask a single question in a single thread (helps other people having the same problem to read and navigate)

First Question Answer

You are declaring a variable inside a class, which is not permitted though You can do something like this inside a class

apple = 10 

and then make a method

    printMyname = () => {
    console.log(this.apple)
}

And then call it outside the class by doing something like this

const app1 = new App ()
app1.printMyname()

Inside the method you can declare var apple = 10 (or you can declare it globally) and call it inside the method

Second Question and third question

This happens because the state of the event most likely changed when it rendered.

So here is how it actually worked.

when it first rendered the page it logged 10. Initially your state is false so it won't print 20 When the state changed it console.logged 10 again and then 20 the next time the state changes, it will again console log 10 and 20

so you log should appear like 10, 10, 20, 10, 20, 10....

Similarly for background change

state.changed (false) -> it re-renders initial style hence it shows green.

Answer 2

Your first example fails to compile because your can't declare variables in a class scope. You can only declare properties of that class:

class Foo {
    aProperty = "Foo";

    static aStaticProperty = 42;

    aFunction() {
         console.log("I am a function");
    }

    static aStaticFunction() {
        console.log("I am a static function");
    }   
}

render() is just a function that has to be declared in every react component class.

Your second example may show that behaviour because a component does call its render() function every time the state or props change. So on the first render this.state.showPerson might be false so that your second console.log() will not be called (because it's in the conditional block). The second time it gets called this.state.showPerson have changed to true thus both console.log()s are executed.