A javascript reactjs question about props

Question

Here is the simple App.js code:

import React from 'react'
import Member from './Member'

function App () {
  const members = [
    { name: 'Andy', age: 22 },
    { name: 'Bruce', age: 33 },
    { name: 'Mary', age: 11 }
  ]
  for (const member of members) {
    return <Member {...member} />
  }
}

export default App

Here is the Member.js:

import React from 'react'

function Member ({ name, age }) {
  return (
  <div>
    {name}
    <hr />
    {age}
  </div>)
}

export default Member

The problem is only the first object {name:'Andy', age: 22} shows in the browser. How can I change the code to show all three of them? I am new to Javascript and React. I just can't figure it out. Can anyone help? Thanks a lot.

Yash Joshi · Accepted Answer · 2020-06-02 07:05:37Z

2

This is happening because as soon as the first iteration is initiated you are returning the jsx and thus it shows only the first member.

Here how you can loop on all members

return (
  <React.Fragment>
    {members.map(member => <Member key={member.name} {...member} /> )}
  </React.Fragment>
)

answered Jun 2, 2020 at 7:05

Yash Joshi

2,8441 gold badge14 silver badges22 bronze badges

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

Comments

iClass Chima · Accepted Answer · 2020-06-02 07:10:30Z

0

One way is not to spread the props at first

Pass the array as it is as

Then in the Member component; use the .map() function to iterate over the Member props like member.map(user => {user.name}, {user.age} )

Hope that helps

answered Jun 2, 2020 at 7:10

iClass Chima

3662 silver badges5 bronze badges

1 Comment

Monica White Over a year ago

Thank you very much for your explanation

Ayudh · Accepted Answer · 2020-06-02 07:15:47Z

0

Please bear in mind that the other answers use member name as the key which is poor practice. Imagine if you had two members with the same name, then you'd get the duplicate key error.

Try:

import React from 'react'
import Member from './Member'


function App () {

  const members = [
    { name: 'Andy', age: 22 },
    { name: 'Bruce', age: 33 },
    { name: 'Mary', age: 11 }
  ]

  return  (
    members.map((member, index) => (
      <Member key={`${member.name}${index}`} {...member} />
    ))
  )
}

export default App

edited Jun 2, 2020 at 7:15

answered Jun 2, 2020 at 7:05

Ayudh

1,7651 gold badge32 silver badges65 bronze badges

1 Comment

Monica White Over a year ago

Thank you very much for your explanation.

Billy Brown · Accepted Answer · 2020-06-02 08:07:08Z

0

As soon as you call return, it will exit the function and return the result of the expression beside the return keyword. Even though you are returning within a for loop, your code will return the value immediately from the function.

If instead you want to return an array of items, you can use map, like this:

function App () {
  const members = [
    { name: 'Andy', age: 22 },
    { name: 'Bruce', age: 33 },
    { name: 'Mary', age: 11 }
  ];
  return {members.map((member, index) => <Member key={index} {...member} />)};
}

map allows you to execute a function over every element in an array, and then return that modified array. When creating a collection of elements, they each need a unique (unique to the collection) key attribute. I am using the index of the item in the array here.

edited Jun 2, 2020 at 8:07

answered Jun 2, 2020 at 7:06

Billy Brown

2,36223 silver badges25 bronze badges

5 Comments

Yash Joshi Over a year ago

Hey Billy, we can also return the array of elements, check Ayudh answer

Billy Brown Over a year ago

@YashJoshi You can return an array of elements, but then you won't be able to render them directly to the (virtual) DOM. React components may only return a single React element. So a fragment can then be used to group and return multiple elements.

Yash Joshi Over a year ago

Did not understood it properly what do you mean by not render to Virtual DOM. Check this Sandbox: codesandbox.io/s/jolly-carson-5l7r8 You can see that we have all Member Component showing up.

Billy Brown Over a year ago

@YashJoshi ooh that must be new since the last time I used React. Thanks for the heads-up; I'll edit my answer.

Yash Joshi Over a year ago

Glad my comment helped :)

Collectives™ on Stack Overflow

A javascript reactjs question about props

4 Answers 4

Comments

1 Comment

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related