CODEWITHSUNDEEP
javascriptreactjs
dongdong
dongdong

Reputation: 51

Props data are not rendering

I have a problem rendering my props data
Here I'm trying to pass props to a component with mapped data from a sample data set

const weatherComponents = weatherData.items.map(weather => {
  return(
    <div key={weather.forecasts.area}>
      <WeatherForecast 
        name={weather.forecasts.area}
        condition={weather.forecasts.forecast}>
      </WeatherForecast>
    </div>
    )})
return(
    {weatherComponents} )

This is the component

function WeatherForecast(props) {
return(
    <div>
        <p>Name: {props.name}</p>
        <p>Condition: {props.condition}</p>
    </div>
)}

This is the sample data set

   {
 "area_metadata": [
   {
     "name": "Yishun",
     "label_location": {
       "latitude": 1.418,
       "longitude": 103.839
     }
   }
 ],"items": [
   {
     "forecasts": [
     {
       "area": "Yishun"
       "forecast" : "cloudy"
     }
   ]}
 ]}

In my browser, it shows Warning: Each child in a list should have a unique "key" prop. and the data are not rendering, it only appears "Name: " without the area name from the data set. Am I mapping the data in the wrong way? Help TT

Upvotes: 0

Views: 73

Answers (2)

Ingeborg Ingridson
Ingeborg Ingridson

Reputation: 26

You have 2 options ... well, 3.

  1. You need an array in "area_metadata" and "items":

1.1. The fast solution:

const weatherComponents = weatherData.items.map(weather => {
  return(
    <div key={weather.forecasts[0].area}>
      <WeatherForecast 
        name={weather.forecasts[0].area}
        condition={weather.forecasts[0].forecast}>
      </WeatherForecast>
    </div>
  )
})

return({weatherComponents})

1.2 The right solution:

const weatherComponents = weatherData.items.map(weather => {

  return weather.forecasts.map( casts => (
    <div key={casts.area}>
      <WeatherForecast 
        name={casts.area}
        condition={casts.forecast}>
      </WeatherForecast>
    </div>
  ))
})

return({weatherComponents})

2. You do not need an array:

{
  "area_metadata": [
    {
      "name": "Yishun",
      "label_location": {
        "latitude": 1.418,
        "longitude": 103.839
      }
    }
  ],
  "items": [
    {
      "forecasts": {
        "area": "Yishun"
        "forecast" : "cloudy"
      }
    }
  ]
}

Upvotes: 1

Gautam
Gautam

Reputation: 825

Just replace 

const weatherComponents = weatherData.items.map(weather => {
  return(
    <div key={weather.forecasts.area}>
      <WeatherForecast 
        name={weather.forecasts.area}
        condition={weather.forecasts.forecast}>
      </WeatherForecast>
    </div>
    )})
return(
    {weatherComponents} )

with

const weatherComponents = weatherData.items.map(weather => {
     const {area, forecast} = weather.forecasts[0];
      return(
        <div key={area}>
          <WeatherForecast 
            name={area}
            condition={forecast}>
          </WeatherForecast>
        </div>
        )})
    return(
        {weatherComponents} )

Upvotes: 1

Related Questions