CODEWITHSUNDEEP
javascriptreactjs
N P
N P

Reputation: 2619

Display properties from state using React

I have a simple React component which pulls in some data via the Monzo API and then I simply want to print it out on the screen. I can see I'm getting back the correct data via the React dev tools and it's setting the state however nothing gets printed in my HTML.

Here is my component:

import React, {Component} from "react";
import "./App.css";
import axios from "axios";

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            account: [{
                id: '',
                description: '',
                created: '',
                type: ''
            }]
        }
    }

    componentDidMount() {
        let config = {
            headers: {
                'Authorization': 'Bearer sampleToken'
            }
        };

        axios.get('https://api.monzo.com/accounts', config).then((response) => {
            this.setState({'account': response.data.accounts});
        });
    }

    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <h2>Hello {this.state.account.map(account =>
                        console.log(account),
                        <p>account.description</p>
                    )}</h2>
                </div>
                <p className="App-intro">
                    Monzo API app
                    {this.state.account.id}
                </p>
            </div>
        );
    }
}

export default App;

My console log within my map function first displays an empty account object and then a filled correct account object, could this be the reason why?

Upvotes: 0

Views: 435

Answers (1)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93203

  <p>{account.description}</p>

instead of 

 <p>account.description</p>

Upvotes: 3

Related Questions