How to display different tables on click in React?

I am making a simple todo. I am fetching data from an API and I want to show all the items in a table by default. There will be 3 buttons – All, Complete and Incomplete which will show All, Completed and Incompleted todos table respectively. I have set states for completed and incompleted todos but can’t wrap my head around how to perform conditional rendering and display different tables on different button clicks.

Below is my code –

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./style.css";

export default function App() {

  const URL = 'https://jsonplaceholder.typicode.com/todos';

  const [todo, setTodo] = useState([]);
  const [completed, setCompleted] = useState([]);
  const [incomplete, setIncomplete] = useState([]);

  useEffect(()=>{
    axios.get(URL)
    .then(res=>setTodo(res.data));
  },[])

  const showCompleted = () =>{
    const completeTask = todo.filter((items)=>items.completed===true);
    setCompleted(completeTask);
  }

  const showIncomplete = () =>{
    const incompleteTask = todo.filter((items)=>items.completed===false);
    setIncomplete(incompleteTask);
  }

  return (
    <div>
      <h1>ToDos!</h1>
      <button type="button">All</button>
      <button type="button" onClick={showCompleted}>Completed</button>
      <button type="button" onClick={showIncomplete}>Incomplete</button>
      <hr />
      <table>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Completed</th>
        </tr>
        {todo.map((items)=>
          <tr key={items.id}>
          <td>{items.id}</td>
          <td>{items.title}</td>
          <td><input type="checkbox" defaultChecked={items.completed ? true : false} /></td>
          </tr>
          )}
      </table>
    </div>
  );
} 

>Solution :

Keep two states, one to store the initial data and another one to keep track of actually displayed data.

Try like this:

function App() {
  const URL = "https://jsonplaceholder.typicode.com/todos";

  const [todo, setTodo] = React.useState([]);
  const [view, setView] = React.useState([]);

  React.useEffect(() => {
    fetch(URL)
      .then((res) => res.json())
      .then((result) => {
        setTodo(result);
        setView(result);
      });
  }, []);

  const showAll = () => {
    setView(todo);
  };

  const showCompleted = () => {
    const completeTask = todo.filter((items) => items.completed === true);
    setView(completeTask);
  };

  const showIncomplete = () => {
    const incompleteTask = todo.filter((items) => items.completed === false);
    setView(incompleteTask);
  };

  return (
    <div>
      <h1>ToDos!</h1>
      <button type="button" onClick={showAll}>
        All
      </button>
      <button type="button" onClick={showCompleted}>
        Completed
      </button>
      <button type="button" onClick={showIncomplete}>
        Incomplete
      </button>
      <hr />
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Completed</th>
          </tr>
        </thead>
        <tbody>
          {view.map((items) => (
            <tr key={items.id}>
              <td>{items.id}</td>
              <td>{items.title}</td>
              <td>
                <input
                  type="checkbox"
                  defaultChecked={items.completed ? true : false}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>