如何修复 reactjs 中类型“JSX.IntrinsicElements”上不存在属性“setConfirmDelete”

Question

index.tsx

const setConfirmDelete = (state, close) => {
  return (
    <Modal show={state} onHide={close}>
     <Modal.Header>
      <Modal.Title>Title</Modal.Title>
     </Modal.Header>
     <Modal.Body>
      'This is a body'
     </Modal.Body>
     <Modal.Footer>
      <Button onClick={close} appearance="primary">
       Save
      </Button>
      <Button onClick={close} appearance="subtle">
       Cancel
      </Button>
     </Modal.Footer>
    </Modal>
   );
}


export default function Users() {
return (
<div>
<gridTable
....
rowFunc={
 [name: 'deleteItem', 
onClick: () => {
              return (<setConfirmDelete state={modal} close={() => setModal(false)} />)
            }
    ]

}>/<gridTable></div>)}

What I'm trying to do here is to display the modal when I click the function delete, I encounter the error which is the Property 'setConfirmDelete' does not exist on type 'JSX.IntrinsicElements' .

I also tried this code:

onClick={()=> setConfirmDelete({modal, false}) 

But it doesn't work or display the data

Answer 1

This particular error "Property 'setConfirmDelete' does not exist on type 'JSX.IntrinsicElements'" is because React assumes that all lower-case element names are built-in aka "intrinsic" elements. All of your components must use uppercase names like SetConfirmDelete .

You cannot return any JSX from an onClick . All event handler handler functions are void and should not return anything. You must instead set that JSX somewhere using state .

Let's change your modal state so that instead of true / false (show/hide) we either store the contents of the modal or false if there is no modal.

Let's make SetConfirmDelete into a valid React component that takes a close prop which is a function.

import React from "react";
import { Modal, Button } from "react-bootstrap";

interface ModalProps {
  close: () => void;
  // you'll want this is the future
  onSubmit: () => void;
}

const ConfirmDeleteModal: React.FC<ModalProps> = ({ close, onSubmit }) => {
  return (
    <Modal show={true} onHide={close}>
      <Modal.Header>
        <Modal.Title>Title</Modal.Title>
      </Modal.Header>
      <Modal.Body>'This is a body'</Modal.Body>
      <Modal.Footer>
        <Button onClick={onSubmit} appearance="primary">
          Save
        </Button>
        <Button onClick={close} appearance="subtle">
          Cancel
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default function Users() {
  // modal state is either an element or false
  const [modal, setModal] = React.useState<React.ReactElement | false>(false);
  // helper function for setting modal to false
  const close = () => setModal(false);
  return (
    <div>
      <div>
        <button
          onClick={() =>
            setModal(
              <ConfirmDeleteModal
                close={close}
                onSubmit={() => console.log("executing delete")}
              />
            )
          }
        >
          Delete
        </button>
      </div>
      {
        // when the modal is an element, we display it
        modal !== false && modal
      }
    </div>
  );
}

Code Sandbox Link