nsantos16

import React, { useState, useEffect, useContext, useRef } from "react";
import ReactDOM from "react-dom";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import "./styles.css";

const Context = React.createContext();

const useBreadcrumbContext = () => {
  const context = useContext(Context);

nsantos16

import React from 'react';

import ReactDOM from 'react-dom';

// Disable in production

if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe');

  axe(React, ReactDOM, 1000);

nsantos16

import React from 'react';

import ReactDOM from 'react-dom';

// Disable in production

if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe');

  axe(React, ReactDOM, 1000);

nsantos16

import React from 'react';

import usePageTitle from 'hooks/usePageTitle';

const ListPage = ({ items = [] }) => {
  usePageTitle('List of items');

  return (
    <div className="list-component">
      <ListTitle title="List component" />

nsantos16

import React from 'react';

const usePageTitle = title => {
  useEffect(() => {
    document.title = title;
  }, [document]);
};

export default usePageTitle;

nsantos16

<div class="list-component">
  <div class="list-title">
    <span>List component</span>
  </div>
  <div class="list-component-items">
    <span>List item 1</span>
    <span>List item 2</span>
  </div>
</div>;

nsantos16

import React, { Fragment } from 'react';

const ListItem = ({ item }) => (
  <Fragment>
    <span>{item}</span>
  </Fragment>
);

// Try to avoid index as key's

nsantos16

<div class="list-component">
  <div class="list-title">
    <span>List component</span>
  </div>

  <div class="list-component-items">
    <div>
      <span>List item 1</span>
    </div>

nsantos16

import React from 'react';

const ListItem = ({ item }) => (
  <div>
    <span>{item}</span>
  </div>
);

const List = ({ items = [] }) => (
  <div className="list-component">

nsantos16

const { status, data, error } =  useQuery('movies', fetchTodoList);