How to call a function in another component from a different component in react js?

Question

I having two files header.js and upload.js. In upload.js I have a popup modal which should be open when I click upload button in the header.js

So basically I want to call setOpened function present in upload.js from header.js

header.js

import React from 'react'

const Header = () => {
  return (
    <div>
          <Link
             data-bs-toggle="modal"
             onClick={() => setOpened(true)}
             role="button"
            >Upload</Link>
    </div>
  )
}

export default Header

upload.js

import React from 'react'
const [opened, setOpened] = useState(false);

const Upload = () => {
  return (
    <div>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="Introduce yourself!"
      >
        {/* Modal content */}
      </Modal>
    </div>
  )
}

export default Upload

In App.js

import Header from './component/Header';
import Footer from './component/Footer';
import Upload from './component/Upload';

function App() {
  return (
   <Header/>
       <Routes>
         <Route path="/upload" element={<Upload/>}/>
       </Routes>
   <Footer/>
);
}

export default App;

Is upload.js used only for the purpose of displaying a modal? — Rohan Agarwal
– Rohan Agarwal, Commented May 10, 2022 at 15:29
just lift state up or use context or use some state management tool(redux, mobx) reactjs.org/docs/lifting-state-up.html reactjs.org/docs/context.html — I-vasilich-I
– I-vasilich-I, Commented May 10, 2022 at 15:32
You can't call const [opened, setOpened] = useState(false); from outside the component, that would mean it will only be created once, not matter how many Upload components you instantiate but it's not allowed. It should be in the function itself. — Ruan Mendes
– Ruan Mendes, Commented May 10, 2022 at 15:33

kingkupps · Accepted Answer · 2022-05-10 15:40:49Z

4

To echo @I-vasilich-I's comment about lifting state up, you should move your modal open state to a higher level (like in App) and pass that state to each child that needs it.

For example

const Header = ({ openModal }) => (
  <div>
    <Link data-bs-toggle="modal" onClick={openModal} role="button">
      Upload
    </Link>
  </div>
);

const Upload = ({ opened, closeModal }) => (
  <div>
    <Modal opened={opened} onClose={closeModal} title="Introduce yourself!">
      {/* Modal content */}
    </Modal>
  </div>
);

const App = () => {
  const [opened, setOpened] = useState(false);
  return (
    <>
      <Header openModal={() => setOpened(true)} />
      <Routes>
        <Route path="/upload" element={<Upload opened={opened} closeModal={() => setOpened(false)} />} />
      </Routes>
      <Footer />
    </>
  );
};

(note make sure you add imports)

edited May 10, 2022 at 15:40

answered May 10, 2022 at 15:37

kingkupps

3,5542 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call a function in another component from a different component in react js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related