Before and After render prop example

renderPropConversion.js

import React from "react";
import PropTypes from "prop-types";

/*
 * Example CarsList with no reusable code that may be duplicated elsewhere
 */
class CarsList extends React.Component {
  state = {
    cars: [],
    isLoading: false,
  };

  _fetch = async () => {
    const res = await fetch("api/url");
    const json = await res.json();
    
    this.setState({ cars: json, isLoading: false });
  };

  componentDidMount() {
    this.setState({ isLoading: true }, this._fetch); 
  }

  render() {
   const { cars, isLoading } = this.state;
    
   return (
     <div>
      <h3>My cards</h3>
      {isLoading && <p>Loading cards m8</p>}
      {cars.length > 0 && (
        <ul>
          {cars.map(car => (
            <li key={car.id}>
              {car.title}
            </li>
          )}
        </ul>
      )}
    </div>  
   );
  }
}

/*
 * Example converting CarsList to reusable List render prop
 */
class List extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired,
    url: PropTypes.string.isRequired,
  };

  state = {
    list: [],
    isLoading: false,
  };

  _fetch = async () => {
    const res = await fetch(this.props.url);
    const json = await res.json();

    this.setState({
      list: json,
      isLoading: false,
    });
  }

  componentDidMount() {
    this.setState({ isLoading: true }, this._fetch);
  }

  render() {
    return this.props.render(this.state);
  }
}

/*
 * Example using the List render prop
 */
<List 
  url="https://api.github.com/users/JoaoCnh/repos"
  render={({ list, isLoading }) => (
    <div>
      <h2>My repos</h2>
      {isLoading && <h2>Loading...</h2>}

      <ul>
        {list.length > 0 && list.map(repo => (
          <li key={repo.id}>
            {repo.full_name}
          </li>
        ))}
      </ul>
    </div>
  )} />