React.js - unable to get the specific prop from a component

user_13590859 0
Viewed 44

so ,i have hard coded the state of the parent component and after passing it in the child component i am unable to retrieve it the child component. and on the other hand if i pass any other other prop other than the state it works.

this is the child component:

import React from 'react';
import './searchresults.css'


class SearchResults extends React.Component {

render(){

 let searchresults=   this.props.searchresults;
    
        


return(
<div className= "searchresults">

<h2>Weather</h2>
<h3>Temprature:{searchresults.main.temp} </h3>
<h3>Temperature minimum: 25 degrees</h3>
<h3>Temperature maximum: 40 degrees</h3>
<h3>Humidity: 81% </h3>
</div>

)

}

}

export default SearchResults;

this is the parent component:

import React from 'react';

import './App.css';
import SearchBar from '../searchbar/searchbar'
import SearchResults from '../SearchResults/searchresults'

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      searchresults:[{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations",
      "main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15
    },"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}]
    }
  }

  render(){
  return (
    <div className="App">
      <header className="App-header">
       <h1>Wanderer</h1> 
      </header>
      <SearchBar />

      <SearchResults searchresults ={this.state.searchresults}
                        />
    </div>
  );
}
}

export default App;

and this the error i get:

TypeError: Cannot read property 'temp' of undefined SearchResults.render F:/rishit/wanderer/src/components/SearchResults/searchresults.js:18

reactjs javascript
3 Answers

Since searchresults in the parent with one item you could pass it like :

 <SearchResults searchresults ={this.state.searchresults[0]} />
user_81728570

searchResults is an arrray it should be searchresults[0].main.temp

<h3>Temprature:{searchresults[0].main.temp} </h3>
user_71183420

Here, searchresults is an array. You need to provide index to access an element. You can use searchresults[0].main.temp but that is not the best way and not a solution if searchresults had multiple elements. I would do it in the following way.

import React from 'react';
import './searchresults.css'


class SearchResults extends React.Component {

render(){
 return(
  this.props.searchresults.map((searchResult) => (
    <div className= "searchresults">
      <h2>Weather</h2>
      <h3>Temprature:{searchResult.main.temp}</h3>
      <h3>Temperature minimum: 25 degrees</h3>
      <h3>Temperature maximum: 40 degrees</h3>
      <h3>Humidity: 81% </h3>
    </div>
   ))  
  )
 }
}

I hope it works.

user_87621240
Related