Is it possible to pass different props from two different files in React?

Question

Suppose I am calling a Component from the index.js and the same component is called off from a different file with a completely different set of props inside a return value. The below images are the two files and the component itself. The Modal component has a dependency on the Home component's toggle state. It will only render when the toggle is true, which is controlled by the button in Home Component. Keep in mind I'm rendering the Modal component in App.js and in Home.js

**This is a small demo of a more realistic situation.

After running this application Modal component is not rendering at all. So the question is why is this happening internally and how to resolve this situation?

                import React, {useState} from 'react'
                import logo from './logo.svg';
                import './App.css';
                import Home from './components/Home';
                import Modal from './components/Modal';

                function App() {

                  const [logoR, setLogoR] = useState(logo);
                  const [currDate, setCurrDate] = useState(new Date());

                  console.log(currDate);

                  return (
                    <div className="App">
                      <header className="App-header">
                        <img src={logoR} className="App-logo" alt="logo" />
                        <p>
                          Edit <code>src/App.js</code> and save to reload.
                        </p>
                        <a
                          className="App-link"
                          href="https://reactjs.org"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          Learn React
                        </a>
                        <Home/>
                        <Modal logoR={logoR} currDate={currDate} />
                      </header>
                      
                    </div>
                  );
                }

                export default App;

Github repo - React-props

Answer 1

In your handleClick() your return the Modal but nothing is being done with that. It's not being inserted into the DOM anywhere.

Something like this might get you closer.

import React, {usestate} trom 'react' 7.2K (gzipped: 3K)
import Modal from './Modal';
const Home = () => {
 const [toggle, set Toggle] = usestate(false);
 console.log(toggle);
                                
 const handleclick () => {
   setToggle(!toggle); 
    
 }
 return (
   <div>
        <button
            className="App-button"
            onclick={handleclick)>
            whats up!
        </button>
        <Modal toggle={toggle} />
   </div>
}
export default Home

I would suggest checking out react portals if you have a modal that you will want to trigger from various parts of the app. They have a good example of how to use this with a modal.

https://reactjs.org/docs/portals.html