Get data value of array object using Swapi

Question

I am building a Film grid that should return their Id, thumbnail, title, episode number and released date.

How can a map these values of Swapi? (Thumbnails are in img folder)

ListFilms.js Component:

import React, { Component } from "react";

class ListFilms extends Component {
  render() {
    const films = this.props.films;
    console.log(films);
    return (
      <div className="row">
        <table className="table table-dark">
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Thumbnail</th>
              <th scope="col">Film Title</th>
              <th scope="col">Released Date</th>
              <th scope="col">Episode Number</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">{films.id}</th>
              <td>
                <img src={} alt={}>
              </td>
              <td>{films.title}</td>
              <td>{films.created}</td>
              <td>{films.episode_id}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default ListFilms;

CodeSandbox Demo

Dhananjai Pai · Accepted Answer · 2019-02-04 03:00:21Z

1

You can use the below code to iterate through the list of items and get it displayed. I have moved the images to public folder to avoid webpack from having to bundle them as part of your code.

https://codesandbox.io/s/z6y768y37p

<tbody>
        { films.map((film,index) => (<tr key={film.title}>
          <th scope="row">{index + 1}</th>
          <td><img src={`/img/${film.title}.jpeg` width="40px"} /></td>
          <td>{film.title}</td>
          <td>{film.release_date}</td>
          <td>{film.episode_id}</td>
        </tr>)) }
</tbody>

edited Feb 4, 2019 at 3:00

answered Feb 4, 2019 at 2:41

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

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

3 Comments

Dhananjai Pai Over a year ago

I have updated the code @mdiiorio. Missed the Ids column previously. great catch!

mdiiorio Over a year ago

I need a better reputation for upvote you :S. If you upvote me first i could do that next!

mdiiorio Over a year ago

Thks!! I made an update in Films.js, setting the key values for fix the Id's!

Collectives™ on Stack Overflow

Get data value of array object using Swapi

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related