Map function on an array not working in React

Question

I'm new to ReactJS. Somehow, I'm unable to get proper output using map on array.

I have an array named pets.

  const pets = [{
    name: 'Bruno',
    type: 'Dog',
    description: 'Bruno is funny and lovable',
    skills: ['fetch', 'being cute', 'roll over'],
    image: 'https://www.dogbreedinfo.com/images17/LabmaranerCasey6Weeks1.JPG'
  },
  {
    name: 'Rocky',
    type: 'Dog',
    description: 'Rocky is funny and lovable',
    skills: ['bite', 'being cute', 'roll over'],
    image: 'https://st.depositphotos.com/1000291/3041/i/950/depositphotos_30415145-stock-photo-white-labrador-puppy.jpg'
  }];

And I'm trying to display using map as below.

  <div>
    <h1>My pets</h1>
    <ul>
      {
        pets.map((pet, index) => {             
          <li key={index}>
            <h1> {pet.name} </h1>
          </li>
        })
      }
    </ul>

  </div>

Doing this is not displaying any data from the array.

What is wrong with my code , can someone tell me?

KcH · Accepted Answer · 2022-09-17 06:16:42Z

1

yes, you forgot to return, you can check Implicit vs Explicit return here

you are doing explicit return, so it's required to write return keyword yourself... as

{
    pets.map((pet, index) => {             
      return(<li key={index}>
        <h1> {pet.name} </h1>
      </li>)
    })
  }

or turn in to implicit as below:

{
    pets.map((pet, index) =>(             
        <li key={index}>
          <h1> {pet.name} </h1>
        </li>
      )
    )
}

answered Sep 17, 2022 at 6:16

KcH

3,5224 gold badges28 silver badges61 bronze badges

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

Comments

Paridhi Gupta · Accepted Answer · 2022-09-17 06:28:50Z

1

You just need to add a return keyword, happy learning :)

 <div>
              <h1>My pets</h1>
              <ul>
                {
                  pets.map((pet, index) => {  
                              
                    return <li key={index}>
                      <h1> {pet.name} </h1>
                    </li>
                  })
                }
              </ul>
          
            </div>

answered Sep 17, 2022 at 6:28

Paridhi Gupta

213 bronze badges

Comments

Gibson · Accepted Answer · 2022-09-17 06:33:21Z

1

You should use the return in li tag or remove the curly braces.

answered Sep 17, 2022 at 6:33

Gibson

1002 silver badges12 bronze badges

Comments

sourav singha · Accepted Answer · 2022-09-17 06:30:16Z

0

Do it like this ...

<div><h1>My pets</h1>
<ul>
  {
    pets.map((pet, index) => (            
      <li key={index}>
        <h1> {pet.name} </h1>
      </li>
    ))
  }
</ul></div>

answered Sep 17, 2022 at 6:30

sourav singha

439 bronze badges

1 Comment

eemmrrkk Over a year ago

you don't have to use ...

Collectives™ on Stack Overflow

Map function on an array not working in React

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related