CODEWITHSUNDEEP
javascriptreactjs
viky
viky

Reputation: 3

Error in making a fetch call

How to loop through the multiple properties in an array and how to use map function and display the multiple properties in an array to the webpage

import React, { Component } from 'react';

import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state={
      booksLists:'',
      description: ''
   }
 }
  componentWillMount() {
    fetch('https://reactnd-books-api.udacity.com/books', { headers: { 
   'Authorization': 'whatever-you-want' }})
    .then(res => res.json())
    .then(res => {
       this.setState({booksLists: res})
   })
  }

    render() {
    let booksLists = this.state.booksLists;
    console.log(booksLists)

    return (
      <div className="App">
         <h2>My Reads</h2>
         <p></p>
       </div>
      );
  }
}

export default App;

Upvotes: 0

Views: 278

Answers (2)

Dan Kreiger
Dan Kreiger

Reputation: 5516

Here is a CodePen Demo , or you can run the snippet below:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      booksLists: []
    };
  }
  componentWillMount() {
    fetch("https://reactnd-books-api.udacity.com/books", {
      headers: {
        Authorization: "whatever-you-want"
      }
    }).then(res => res.json()).then(res => {
      this.setState({booksLists: res.books});
    });
  }

  render() {
    const {booksLists} = this.state;
    const books = booksLists
      ? booksLists.map(book => <div className='panel panel-default col-xs-12'>
        <div className='panel-heading'>
          <h3>{book.title || 'not available'}</h3>
          <h5>{book.subtitle || 'not available'}</h5>
        </div>
        <div className='panel-body'>
          <div className='row'>
            <div className='col-xs-4'>
              <img className='img-responsive' src={book.imageLinks.smallThumbnail}/>
            </div>          
            <div className='col-xs-8'>
              <p>
                <strong>Authors: </strong>
                 {book.authors
                  ? book.authors.join(', ')
                  : 'not available'}</p>
              <p>
                <strong>Publisher: </strong>
                {book.publisher || 'not available'}</p>
              <p>
                <strong>Date of publication: </strong>
                {book.publishedDate || 'not available'}</p>
            </div>
          </div>
          <div className='row'>
            <div className='col-xs-12'>
              <p>{book.description || 'not available'}</p>
            </div>
          </div>
        </div>
      </div>)
      : null;

    return (
      <div className="App">
        <h2>My Reads</h2>
        {books}
      </div>
    );
  }
}

ReactDOM.render(
  <App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div id='root'></div>

Upvotes: 1

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

If your booklist is an object you could do something like the following:

   render() {

     let list = booklist.arrayName.map(function(book) {
        return <li key={book}>{book}</li>;
      });     

    return (
      <div className="App">
         <h2>My Reads</h2>
         <ul>{ booksLists }</ul>
       </div>
      );
  }

Firstly you should map over the bookLists array returning a jsx element and assigning this mapped array to a new variable. Generally for a list this will be an li element. Each item requires a key. You can then reference the values you want to display within the li element.

You can then reference the new variable in the return statement of the render method.

Upvotes: 0

Related Questions