Map() function to iterate components in react.js?

Question

I have started learning react.js recently, I was having issue understanding the map() function in JavaScript. I am providing code snippets where I am trying to iterate over the "person" component, while I am trying to output the result on the console I just observed its iterating twice but the components are displayed only once in the browser[enter image description here][1]. Can anyone tell me why its iterating twice?

//this is the state

class App extends Component {
  state = {
    persons: [
      {id:'aksjsdk',name:'ABC',age:'26'},
      {id:'aksjajsd',name:'XYZ',age:'25'},
      {id:'aksjadskjd',name:'MNO',age:'27'}
    ],
      showAllPersons: false
  }

........

  if(this.state.showAllPersons){
    persons = (
    <div>
        {
          this.state.persons.map((person,index) => {
            console.log(person);//printing twice
            return <Person
            name = {person.name}
            age = {person.age} 
            click = {this.deletePersonHandler.bind(this,index)}
            key ={person.id}/>
          })
        }
    </div>)
  }

....... //console output

Object { id: "aksjsdk", name: "ABC", age: "26" }
Object { id: "aksjajsd", name: "XYZ", age: "25" }
Object { id: "aksjadskjd", name: "MNO", age: "27" }
Object { id: "aksjsdk", name: "ABC", age: "26" }
Object { id: "aksjajsd", name: "XYZ", age: "25" }
Object { id: "aksjadskjd", name: "MNO", age: "27" }

Barry Michael Doyle · Accepted Answer · 2020-05-11 16:13:30Z

2

Whenever a component's props or state update, the component re-renders.

Since you have a console.log statement in the render, we can assume that your component is rendering again. This is most likely due to some parent component rendering again like the moment it is mounted.

When a parents component re-renders, than all it's children (along with their children) re-render as well.

When a re-render occurs, it won't clear the console, so the console values are logged first time, then when the component gets re-rendered it logs again.

answered May 11, 2020 at 16:13

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

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

Collectives™ on Stack Overflow

Map() function to iterate components in react.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related