CODEWITHSUNDEEP
javascriptreactjsnext.js
ubi goreng
ubi goreng

Reputation: 53

call modal function in different file react

I'm learning react and nextjs.

I try to call modal from another file but it's not working

this is my code:

Signin.js

import { Modal } from "react-bootstrap";
import { useState } from "react";

export function SignIn() {
  const [show, setShow] = useState(true);

  const handleClose = () => setShow(false);
  return (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Close
        </Button>
        <Button variant="primary" onClick={handleClose}>
          Save Changes
        </Button>
      </Modal.Footer>
    </Modal>
  );

}

Navbar.js

import { SignIn } from "./Signin";

export default function Navbar() {
 return(
  <button onClick=(()=>SignIn()>signin</button>
 )
}

When I run this code it's nothing happen, can someone help and explain it to me? thanks!

Upvotes: 0

Views: 1367

Answers (1)

ValeriF21
ValeriF21

Reputation: 474

You can not just execute a component as a function.. What i did here is passing the function "handleClick" to Navbar as a prop and execute it from there, when you click the button that the state "show" toggles its value. The code below tested in Sandbox, In App.js i imported Navbar to display the button.

Link: Sandbox

Navbar.js:

import SignIn from "./SignIn";

export default function Navbar({ handleClick }) {
    return <button onClick={() => handleClick()}>Button</button>;
}

SignIn.js:

import { Modal } from "react-bootstrap";
import { useState } from "react";
import Navbar from "./Navbar";

export function SignIn() {
    const [show, setShow] = useState(true);

    const handleClick = () => {
        setShow(!show);
    };

    const handleClose = () => setShow(false);
    
    return (
        <div>
            <Navbar handleClick={handleClick} />
            <Modal show={show} onHide={handleClose}>
                 <Modal.Header closeButton>
                      <Modal.Title>Modal heading</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                      Woohoo, you're reading this text in a modal! 
                 </Modal.Body>
                 <Modal.Footer>
                     <button variant="secondary" onClick={handleClose}>
                            Close
                      </button>
                     <button variant="primary" onClick={handleClose}>
                            Save Changes
                     </button>
                 </Modal.Footer>
            </Modal>
          </div>
      );
}

Upvotes: 1

Related Questions