mixed-concerns.js

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

const MyComponent = () => {
  const [numberOfUsers, setNumberOfUsers] = useState(0);
  useEffect(() => {
    axios.get('/users/count')
      .then(response => setNumberOfUsers(response.data.count))
      .catch(error => console.log('that is an error my friends: ' + error));
  }, []);
  
  return(
    <>
      Number of users: {numberOfUsers}.
    </>
  )
};

export default MyComponent;