Parsing JSON Object in React.js through component

Question

I am trying to parse JSON response fetched from an API in index.html and sending it to a component Card.js as props and trying to render it, but it turns out that I can just access it only to a certain extent. I can get the console log of the response but cannot render it. I am a beginner in reactjs. Any help will be appreciated.

card.js

import { render } from 'react-dom';

import '../css/styles.css'

const Card = function(props){
    console.log("props", props.props.coord)

    return(
    <div>
        <h1>Weather Information</h1>
        <div>{props.props.coord.lon}</div>

        {/* <ul>
            <li>Longitude:{t['lon']}</li>
        </ul> */}
    </div>
        // <div class = "card-complete">{cardval}</div>
    )
}

export default Card;

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

import JSON from './weatherdata.json'
import Card from './components/card'
import App from './components/App'



class WeatherApp extends Component{

    state = {
        apidata : []
    }

    componentDidMount(){
        fetch("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139")
        .then(data => data.json())
        .then(data => this.setState({apidata: data}))
        .catch(console.log)
      }

    render(){
        return(
            <div>
                <App/>
                <Card props={this.state.apidata}/>
            </div>
            )
    }

}

ReactDOM.render(<WeatherApp />, document.getElementById('root'));

I cannot access the 'lon' and 'lat' parameters. TypeError: Cannot read property 'lon' of undefined.

Edit: If I use props.props.coord.lon, I get Cannot read property 'lon' of undefined and if I use just props.props.coord in div it shows that it is not a valid react child, object with keys lat and lon found.

fadi omar · Accepted Answer · 2020-03-01 18:20:36Z

1

ooh, that's because of the render method called before the componentDidMount method with an empty array, then the ComponentDidMount fires and make the request to fetch data then got the data and print it to your console, I can expect that you receive an undefined console before the props consoling,

take a look at the react life cycle

**you need to check if there is data before rendering


class WeatherApp extends Component{

    state = {
        apidata : []
    }

    componentDidMount(){
        fetch("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139")
        .then(data => data.json())
        .then(data => this.setState({apidata: data}))
        .catch(console.log)
      }

    render(){
        return(
            <div>
                <App/>
                // here to check if there is data in the state by checking there length
                this.state.apidata.length && <Card props={this.state.apidata}/>
            </div>
            )
    }

}

answered Mar 1, 2020 at 18:20

fadi omar

7687 silver badges15 bronze badges

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

1 Comment

Piyush Raut Over a year ago

I understand what you are saying but this.state.apidata.length && <Card props={this.state.apidata}/> is not working for me. Yes, I got an empty console before the props. I am using {this.state.apidata.length} && <Card props={this.state.apidata}/> now but same results. @fadi_omar

Medet Tleukabiluly · Accepted Answer · 2020-03-01 18:13:47Z

0

Change this

state = {
    apidata : []
}

To this

state = {
    apidata : { coord: { lat: 0, lon: 0 } } // this is initial value, used until data fetched
}

answered Mar 1, 2020 at 18:13

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

Collectives™ on Stack Overflow

Parsing JSON Object in React.js through component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related