ReactJS - Loop with map function not rendering view

Question

I know this is kind of a basic question... but I am just learning React and am not so familiar with Javascript as well.

App.js

  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
        {weatherCards.map((obj, index) => {
           <Card {...obj}/>
        })}
      </div>
    </div>
  )

Card.js

const Card = ( props ) => {
    
    return (
        <div className="card">
            <img src={props.iconLink}/>
            <div className="caption">{props.iconName}</div>
            <h3>Day: {props.day}</h3>
            <h3>time: {props.time}</h3>
            <h3>temperature: {props.temperature}</h3>
        </div>
    )
}
export default Card

The map does not seem to be displaying anything.

score 2 · Accepted Answer · answered Aug 09 '21 at 03:48

2

Looks like you forgot the return in the map method

<div className="container">
        {weatherCards.map((obj, index) => {
           return <Card {...obj}/>
        })}
      </div>

answered Aug 09 '21 at 03:48

Hyetigran

1,150
3
11
29

Alternatively OP can exclude the curly braces and just do `weatherCards.map(obj => )`. No `return` necessary then, since they just want to return an element. – Matt U Aug 09 '21 at 03:52

score 1 · Answer 2 · answered Aug 09 '21 at 03:55

You can directly return the component like below

  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
        {weatherCards.map((obj, index) => <Card {...obj}/>)}
      </div>
    </div>
  )

So in arrow function if you give anything after => that will be returned on every iteration. So if you give {}-Which is a function body it will return the function body. But if you give any variable or Componenet it will directly return that. We do this if we need to return any plain object.But sometime you have to do some logical execution, that time you can define a function body. But as you are defining a function body you must use the return key like this below

  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
        {weatherCards.map((obj, index) => {
           // your code here
           return <Card {...obj}/>
        })}
      </div>
    </div>
  )

ReactJS - Loop with map function not rendering view

2 Answers2