1

So I am relatively new to react and have some basic understanding of Javascript. I was following this tutorial and while the instructor move forward everything seemed to be clear but then, When I started to read again, I am unable to understand this 

 render() {
  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>
 );
}

While, I know what it does and use of if-statement, I am having tough time figuring out what does this mean in Javascript or react

 person= (......
.....)

**console.log(typeof person)** states it to be an object but this doesn't seem to be an object. So what exactly is this and why have the instructor used it (Below is my html inside return and I know it is being used to add content dynamically) 

  return (
    <div className={classes.App}>
            <h1> Hi I am react App</h1>
            <p className={classese}>
            hey </p>
            <button className={btnClass}
            onClick={this.togglerPersonHandler}>Button</button>
            {person}
        </div>
     )

3 Answers 3

Reset to default
1

React uses JSX syntax to allow HTML to be written along with JS. When you assign person to that snippet of HTML, React is doing work behind the scenes to convert that HTML into a JS object.

For example, the snippet of HTML <div>Hello World</div> is actually compiled to React.createElement("div", null, "Hello World"); in JS.

The person variable in this case corresponds to that snippet of JSX that is compiled to a React element.

0

person is just kind of react element you can use it anywhere in the component or you can say it is a variable by default it is null after full fill your condition in the code that you have write you have assigned the element to the variable.

0

<Person /> is a Component which renders this.state.person each element.
let person = null; declare a veriable to hold all this.state.person element as set of Component.
If showPerson ture then shows all the person.

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)} 
      />
})

function maping person. it would like 

<div>
     <Person key="value" name="name" age="age" changed="func" click="func"/>
     <Person key="value" name="name" age="age" changed="func" click="func"/>
     <Person key="value" name="name" age="age" changed="func" click="func"/>
</div>

Then, in return statement. if showPerson = true then 

person = <div>
            <Person key="value" name="name" age="age" changed="func" click="func"/>
            <Person key="value" name="name" age="age" changed="func" click="func"/>
            <Person key="value" name="name" age="age" changed="func" click="func"/>
       </div>

Else person = null Then

return (
  <div className={classes.App}>
        <h1> Hi I am react App</h1>
        <p className={classese}>
        hey </p>
        <button className={btnClass}
        onClick={this.togglerPersonHandler}>Button</button>
        {person} //all person will show here
    </div>
 )