reactjs services and presentation components splitted

I am giving my first steps into reactjs. I created a service to the movie db API using fetch. I already accomplish to list the name of the movies.

What I am trying to do is have a completly independent components. One component to connect to the API and other component be responsible to present that info.

Right now what I have both of this behaviours in the same component :(

Can anyone help me?

Here's my code

import React, { Component } from 'react';

const listUrl = 'http://ift.tt/2jv9WkI';

class ListingService extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fetch(listUrl)
      .then((response) => {
        if (!response.ok) {
          throw Error('Network request failed');
        }
        return response;
      })
      .then((response) => {
        return response.json();
      })
      .then((response) => {
        this.setState({
          movieName: response.results.map((movie) => {
            return (
              <li key={movie.id}>{movie.title}</li>
            );
          }),
        });
      }, () => {
        this.setState({
          requestFailed: true,
        });
      });
  }

  render() {
    if (this.state.requestFailed) return <p>Failed!</p>;
    if (!this.state.movieName) return <p>Loading...</p>;
    return (
      <div>
        <h2><ol>{this.state.movieName}</ol></h2>
      </div>
    );
  }
}

I have a father component with this code:

import React from 'react';
import ListingService from '../../services/listing/index';


const List = () => {
  return (
    <div>
      <b>List of movies</b>
      <ListingService />
    </div>
  );
};

export default List;

Should I use redux to this?