Remove :any from component in React

Question

I am starting with React. I am trying to send a var and function to my component. I know that it is a bad practice to use :any that is why I want to change for a proper way.

I am doing a modal and I am sending the data to my component this way. I am using useState

Datatable.tsx

import { useEffect, useMemo, useState } from "react";
import Modal from "../modal/Modal";

const Datatable = () => {
 const [show, setShow] = useState<boolean>(false);
 
 return (
    <div>
      <Modal show={show} closeModal={() => setShow(false)} />
      <button onClick={() =>setShow((s) => !s)}>
          Open Modal
      </button>

      <tableStuff/>
    <div/>
  );

Modal.tsx

import "./modal.scss";
import React from "react";
import ReactDOM from "react-dom";

const Modal = (props:any) => {

  const portal = document.getElementById("portal");
  if (!portal) {
    return null;
  }
  if (!props.show) {
    return null;
  }
  return ReactDOM.createPortal(
    <>
      <div className="modal" onClick={props.closeModal}>
        <div className="content">
          <h2>Simple modal</h2>
        </div>
      </div>
    </>,
    portal
  );
};

export default Modal;

I have seen this on tons of videos, but the following piece of code does not work for me.

I am getting this error Binding element 'show' implicitly has an 'any' type and Binding element 'closeModal' implicitly has an 'any' type

//...
const Modal = ({show, closeModal}) => {
 if (show) {
    return null;
  }
//...
  return ReactDOM.createPortal(
    <>
      <div className="modals" onClick={closeModal}>      
          <button onClick={closeModal}>Close</button>
        </div>
    </>,
    portal
  );
}

Is something else I am missing in order to not use (props:any)? Any help or suggestion would be nice.

Answer 1

interface ModalProps {
  show: boolean;
  closeModal: () => void;
}

const Modal = ({show, closeModal}: ModalProps) => {