CODEWITHSUNDEEP
javascriptreactjstypescript
Marco Ávila
Marco Ávila

Reputation: 53

Typescript error 2769 - Trying to pass a process information to data state to use it on a modal

i'm trying to pass a process to a setData state from a .map function so i can show it on a modal and it is given the following error:

"No overload matches this call. Overload 1 of 2, '(props: { component: ElementType; } & { children?: ReactNode; classes?: Partial | undefined; color?: "inherit" | ... 8 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element', gave the following error. Property 'component' is missing in type '{ onClick: void; }' but required in type '{ component: ElementType; }'. Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error. Type 'void' is not assignable to type 'MouseEventHandler | undefined'. TS2769"

The code is the following:

import { Box, Modal } from "@mui/material";
import React, { FC, Fragment, useState } from "react";
import LaunchIcon from "@mui/icons-material/Launch";
interface Props {
  setProcesses: (val: any) => void;
  processes: Array<any>;
}
const CourseTable: FC<Props> = ({ processes, setProcesses }) => {
  const [open, setOpen] = useState<boolean>(false);
  const [data, setData] = useState<any>();

  const handleOpen = (process: any) => {
    setData(process);
    setOpen(true);
    console.log(data);
  };

  const handleClose = () => setOpen(false);

  const diferenceDates = (value: any) => {
    const dateNow = new Date();
    const dateCreation = new Date(`${value}`);
    const diffTime = Math.abs(dateNow.valueOf() - dateCreation.valueOf());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
  };

  const dateVisitTrimmed = (value: any) => {
    const visitDate = new Date(value);
    const dateVisit = visitDate.toLocaleDateString();
    return dateVisit;
  };

  return (
    <div className='coursetable'>
      <table>
        <thead>
          <tr>
            <th>N/Ref</th>
            <th>V/Ref</th>
            <th>Proponente</th>
            <th>Contacto</th>
            <th>Morada</th>
            <th>Visita</th>
            <th>Dias em Curso</th>
          </tr>
        </thead>
        <tbody>
          {processes.map((process: any) => (
            <tr>
              <td>{process.processNumber}</td>
              <td>{process.vRef}</td>
              <td>{process.clientName}</td>
              <td>{process.clientContact}</td>
              <td>{process.address}</td>
              <td>{dateVisitTrimmed(process.visitDate)}</td>
              <td>{diferenceDates(process.creationDate)}</td>
              <td>
                <LaunchIcon onClick={handleOpen(process)} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <Modal open={open} onClose={handleClose}>
        <Box>cenas da vida</Box>
      </Modal>
    </div>
  );
};

export default CourseTable;

Upvotes: 0

Views: 1114

Answers (1)

CRice
CRice

Reputation: 32176

The line:

<LaunchIcon onClick={handleOpen(process)} />

is the issue. The onClick prop of a component should be a function, but what you have given it is instead the result of handleOpen, rather than the handleOpen function itself.

To fix this, wrap your click handler into an anonymous function which can provide the correct process via its closure:

<LaunchIcon onClick={() => handleOpen(process)} />

Upvotes: 1

Related Questions