Recommand · October 22, 2021 0

I have a Modal in React that is showing when first rendering the App

I have a Modal with a Form inside, which i want closed when i first render the app.
This Modal should only open when i click a "Add more" button.
Problem is it’s happening the opposite, the Modal is already open when i render the app.

I’ve already worked with Modals and i know i can use useState() to toggle if it’s open or not.

This is the all the code regarding the Modal.
I’m using React Bootstrap.

// App.tsx


const [showFormModal, setShowFormModal] = useState(false);

 const closeForm = () => {
setNewTable({});
setShowFormModal(false);}


<TableForm
      show={showFormModal}
      handleClose={closeForm}
      onInputChange={onInputChange}
      addPost={addNewTable}
    />

this is the code regarding the Modal inside the component:

//TableForm


    const TableForm = (
  show: any,
  handleClose: any,
  onInputChange: any,
  addPost: any
) => {
  const [validate, setValidate] = useState(false);

  const checkAndAddStarship = async (e: any) => {
    setValidate(true);
    try {
      await addPost(e);
      setValidate(false);
      handleClose();
    } catch (e) {
      window.alert(e);
    }
  };

  console.log(show);

  return (
    <Modal size="xl" centered show={show} onHide={handleClose}>
      <Modal.Header closeButton onClick={handleClose}>
        <Modal.Title>Add New Table</Modal.Title>

Check the type you are receiving in your component. maybe do show : boolean instead of show : any

Thank you Himura,

I solved the problem:
I passed the props to TableForm in the wrong way: basically i told my App that the ‘show’ variable was an entire object with the other 3 props.

This was my error:

 const TableForm = (
  show: any,
  handleClose: any,
  onInputChange: any,
  addPost: any
)

I was able to make it work simply changing it to this:

const TableForm = ({show, handleClose, onInputChange, addPost})

i was forgetting {}