New.js

import React, { useState, useEffect } from "react"
import axios from "axios"
import { Checkbox, Button } from "antd"

import "./styles.scss"

import { data } from "./data.js"

import DisplayResults from "../DisplayResults"

const ModelsTable = () => {
  const [models, setModels] = useState([])
  const [selected, setSelected] = useState([])
  const [compare, setCompare] = useState(false)

  function onChange(e, model) {
    const status = e.target.checked
    const found = selected.findIndex(({ id }) => id === model.id)

    if (status && found === -1) {
      setSelected([...selected, model])
    } else {
      const { id } = model
      const filtred = selected.filter(model => id !== model.id)
      setSelected(filtred)
    }
  }

  const reset = () => {
    setCompare(false)
    setSelected({})
    console.log("fck", selected)
  }

  const compareSubmit = () => {
    setCompare({ compare: true })
  }

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(({ data: model }) => {
        setModels(model)
        console.log("dataaaa", model)
      })
  }, [])

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Model Name</th>
            <th>Timestamp</th>
            <th>Select</th>
          </tr>
        </thead>
        <tbody>
          {models.map(model => (
            <tr
              className={selected[model.id] ? "highlight" : "" + "column-hover"}
              key={model.id}
            >
              <td>{model.name}</td>
              <td>{model.address.zipcode}</td>
              <td>
                {console.log("--------------")}
                {console.log("S", selected)}
                {console.log("id", model.id)}
                {console.log("f", selected[model.id])}
                <Checkbox onChange={e => onChange(e, model)} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="fixed-bottom-right">
        <Button type="default" onClick={() => reset()}>
          Reset
        </Button>
        <Button className="m-l" type="primary" onClick={() => compareSubmit()}>
          Compare
        </Button>
      </div>

      {compare && <DisplayResults model={models} />}
    </div>
  )
}

export default ModelsTable