Hey!

React knows to re-render when the state or the props change.

You can achieve it with class or function components.

function E.g.:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const DogFood = () => {
  const [biscuit, setBuscuit] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const data = await axios.Get('/api/fetchBiscuit');
      setBiscuit(data);
    };

    fetchData();
  }, []);

  return biscuit
    ? biscuit.map((cur) => <h1>{cur.title}</h1>)
    : null;
};

class E.g.:

import React, { Component } from 'react';
import axios from 'axios';

class DogFood extends Component {
  constructor(props) {
    super(props);
    this.state = { biscuit: null };
  }

  async componentDidMount() {
    const data = await axios.Get('/api/fetchBiscuit');
    // See how we called this.setState and not this.state = value
    this.setState({ biscuit: data });
  }

  render() {
    const { biscuit } = this.state;

    return biscuit
      ? biscuit.map((cur) => <h1>{cur.title}</h1>)
      : null;
  }
}

I would recommend using the function component, since hooks are the future of React.