Using a JSON from Flickr directly in return() or copy it using .slice? React beginner

Question

I'm learning React from self learning and need help below for a task. Please apologise for my poor code, still learning.

The main focus of this is trying to use this.setState to push the contents I have gathered from the JSON file to my state as shown below.

(please notice that the list state was a test to see if I was using this.setState correctly) (comments are things I have tried but found they have not given me the result I was looking for)

import React, { Component } from 'react';

export default class App extends Component { constructor(props) { super(props); this.state = { items: [], titles: [], list: [1, 2, 3], } //this.getFlickrApi = this.getFlickrApi.bind(this); }

I'm currently trying to create a simple app that displays pictures from Flickr. Currently using the API URL: https://api.flickr.com/services/feeds/photos_public.gne?format=json&&nojsoncallback=1

I'm connecting to this with the code below

 componentDidMount() { var request = new XMLHttpRequest();

   request.open('GET', 
  'https://api.flickr.com/services/feeds/photos_public.gne? 
   format=json&&nojsoncallback=1', true);
  var dataOutput = request.onload = function() {

    if (request.status >= 200 && request.status < 400) {
    console.log('Before JSON.parse');
    var data = JSON.parse(request.response);
    console.log(data);
    //this.setState({ items: data.items })

    console.log('After JSON.parse');

} else {
    console.log('error');
}
dataOutput = data;

console.log(dataOutput.items[1].title)
//dataOutput.items.forEach()
//this.setState({items: dataOutput.items});

}

request.send();

}

And I'm trying to use this to display the 'titles' of each 'item' within the render function.

render() {

// Use below for a function
// data.items.forEach(item => {

//     console.log(item.title)


//     //this.setState({titles: data.items.titles})
//     //console.log(this.state.titles)
// });
//console.log(this.state);
//console.log(getFlickrApi());
// {this.getFlickrApi()}

return (
  <div className="FlickrApiContainer">


    ))}
  {this.state.items.map(item => (<li key={item}>{item.title}</li>))}
  {this.renderItems()}


  </div>
);

}

But it's not displaying within the list tags despite I can console to it.

Any help appreciated.

Kind regards,

Sam

There are two commented out lines with this.setState within render() and the other one is in ComponentDidMount. Both didn't work for me, however I'm finding that pushing a json's contents into State is proving more difficult as opposed to just a string. Like I said, I'm a beginner so I'm still learning react, I just need a nudge in the right direction, so unsure whether you can put setState in render/componentDidMount. — Samuel Catley
– Samuel Catley, Commented Feb 13, 2019 at 13:10

Samuel Catley · Accepted Answer · 2019-02-13 15:59:45Z

0

I was not using an arrowhead function in request.onload. As soon as I did and changed it from

var dataOutput = request.onload = function() {

to

var dataOutput = request.onload = () => {

it started to populate the list items with the titles of each item.

answered Feb 13, 2019 at 15:59

Samuel Catley

1

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

Collectives™ on Stack Overflow

Using a JSON from Flickr directly in return() or copy it using .slice? React beginner

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related