How to fetch images from an API in React

1

Hi,

How can i list tv shows in search by name, description and images fetching from TVMaze API ?
I can not fetch images with title and description. Please help

import React, { Component } from 'react';
import Showlist from '../Showlist';
import icon from '../../images/find-icon.svg';
import Spinner from '../Spinner';

class Tvshows extends Component {

    state = {
        shows: [],
        showName: '',
        isFetching: false
    }

    onShowsInputChange = e => {
        this.setState({ showName: e.target.value, isFetching: true});
        fetch(`http://api.tvmaze.com/search/shows?q=${e.target.value}`)
            .then(response => response.json())
            .then(json => this.setState({ shows: json, isFetching: false }));
    }

    render () {
        const { shows, showName, isFetching } = this.state;

        return (
            <div className="row justify-content-center my-5">
            <div className="col-sm-6 col-sm-6-offset my-5">
            <p className="text-center text-monospace h2">
            <img src={icon} width="30" height="30" className="icon align-top mr-3" alt="icon" />
            Search TV Shows</p>
            <div className="input-group mb-3 my-3 w-25 mx-auto">
                <input 
                className="form-control"
                value={showName} 
                type="text" 
                onChange={this.onShowsInputChange}
                placeholder="Enter a TV show" />
                </div>
            {
                !isFetching && shows.length === 0 && showName.trim() !== ''
                &&
                <div class="alert alert-danger" role="alert">
                TV show has not been found!
                </div>
            }
            {
                isFetching && <Spinner />
            }
            {
                !isFetching && <Showlist list={this.state.shows} />
            }
            </div>
            </div>
        )
    }
}

export default Tvshows;

Showlist

import React from 'react';
import './style.css';
import { Link } from 'react-router-dom';

const ShowsListItem = ({ shows }) => (
    <div>
        <Link to={`/shows/${shows.show.id}`}>
            {shows.show.name}
        </Link> 
    </div>
)

const Showlist = (props) => {
    return (
        <div>
                {props.list.map(shows => (
                    <ShowsListItem shows={shows} key={shows.show.id}/>
                ))}
        </div>
    )
}

export default Showlist;

Main

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Shows from '../Shows';
import SingleShow from '../SingleShow';

const Main = props => (
    <Switch>
        <Route exact path="/" component={Shows} />
        <Route path="/shows/:id" component={SingleShow} />
    </Switch>
);

export default Main;
2

What errors are you seeing in the browser?

Honestly, without seeing more of the code (especially the part that fetches the data), it could be difficult to give you more advice. If you can post a link to your project (codesandbox,io or GitHub), that would be great.

3

Hi,

There is no any error, i just want to add images in my search that shows name, description(I will add later) and image. I have problem about fetching images from http://api.tvmaze.com/
So my question is how can i fetch images in my Tvshows component?

4

What code have you written so far to try and fetch images?

5