Element type is invalid: expected a string (for built-in components), the way I do the import seems good

Question

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I know this error is quite common and easy to fix but I still cannot find my error.

I got this element when I include the component ProcessModal

on my component

export const CreateProcessButton = ({ selectedIds }) => {

  const [showProcessModal, setShowProcessModal] = useState(false);
  // const refresh = useRefresh();
  // const notify = useNotify();
  // const unselectAll = useUnselectAll();

  return (
    <Button
      label="Dupliquer la séléction sur ..."
      onClick={() => setShowProcessModal(true)}
    >
      <ProcessModal open={showProcessModal} {...selectedIds}/>

      {/*</ProcessModal>*/}
      <SyncIcon />
    </Button>
  );
};

I import ProcessModal this way

import ProcessModal from './processModal';

from the file processModal.jsx located in the same directory.

The content of processModal.jsx :

import React, {useState} from "react";
import Modal from 'react-modal';

const ProcessModal = (selectedIds, open) => {
  const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)'
    }
  };

  var subtitle;
  const [showProcessModal,setShowProcessModal] = useState(open);

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal(){
    setShowProcessModal(false);
  }

  return (
    <Modal
      isOpen={showProcessModal}
      onAfterOpen={afterOpenModal}
      onRequestClose={closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
      <button onClick={closeModal}>close</button>
      <div>I am a modal</div>
      <form>
        <input />
        <button>tab navigation</button>
        <button>stays</button>
        <button>inside</button>
        <button>the modal</button>
      </form>
      {/*<SelectField choices={[*/}
      {/*  { id: 'M', name: 'Male' },*/}
      {/*  { id: 'F', name: 'Female' }*/}
      {/*]}*/}
      />
    </Modal>
  );
};

export default ProcessModal;

Do you know why I have this error, or in which way I can find the problem since the error gives me no indication.

You've got a dangling `/>` on the 5th from the bottom line of `processModal.jsx`. Is that a transcription error? — jered, Sep 23 '20 at 00:06
Also that error usually at least indicates which file has the erroneous import, do you have that info? Are you sure it's `processModal.jsx`? — jered, Sep 23 '20 at 00:07

score 2 · Accepted Answer · answered Sep 23 '20 at 09:13

React components expect a single props object as a parameter. What you have done is a bit strange in how you define your PostModal component signutare as it is neither expecting a single porps object or destructing it to inside variables but instead expects two arguments.

Try this:

// here we destruct the props object in the variables you expect being inside
const ProcessModal = ({ selectedIds, open }) => { ... }

When using the component also try this:

<ProcessModal open={showProcessModal} selectedIds={selectedIds}/>

Element type is invalid: expected a string (for built-in components), the way I do the import seems good

1 Answers1