CODEWITHSUNDEEP
javascriptreactjsfetch-api
laurent
laurent

Reputation: 55

Need help to fetch API

I'm trying to fetch an API but the data are not rendering on my page. I think I'm doing something wrong. Can some help me, I added a photo of the data to fetch and my code also:

enter image description here

export default class CryptoCard extends Component {
     constructor(props) {
         super(props)
         this.state = {
             cryptos: [],
             name: props.name,
             symbol : props.symbol
         }
     }

     componentDidMount() {
         
        fetch(`https://api.nomics.com/v1/currencies/ticker?key=${APP_KEY}&ids=BTC,ETH,XRP&attributes=id,name,symbol,price`)
        .then(response => response.json())
        .then(data => console.log(data))
        
     }
    render() {

        const { cryptos } = this.state;
        return (
            <div>
     
            <ul>
                {
                    cryptos.map(crypto => <li>{cryptos}</li>)
                }

            </ul>

        </div>
        )
    }
}

Upvotes: 0

Views: 40

Answers (1)

Shmili Breuer
Shmili Breuer

Reputation: 4147

You need to update your cryptos array once you get back the data from the API like this

 componentDidMount() {
     fetch(`https://api.nomics.com/v1/currencies/ticker?key=${APP_KEY}&ids=BTC,ETH,XRP&attributes=id,name,symbol,price`)
     .then(response => response.json())
     .then(data => this.setState({cryptos:data})
 }

Also in your map here is how to display the info

cryptos.map(crypto => <li>{crypto.symbol}...</li>)

Upvotes: 2

Related Questions