title: How can I send data from one component to another without calling that component in React?
body: <p>How can I send the room.id data I obtained in the Homepage.js component to the Player.js component? Before doing this, I used PrivateRouter component in App.js. Therefore, my job is getting very difficult since I cannot call the component directly while routing the route with Link.</p>
  <p>homepage.js</p>
  <pre><code> &lt;Heading as=&quot;h1&quot; mb={6}&gt;
              Rooms
              &lt;/Heading&gt;
              &lt;Divider orientation=&quot;horizontal&quot; /&gt;
             {rooms.map((room)=&gt; (
                &lt;ListItem&gt;
                &lt;ListItemText primary={room.roomName} secondary={room.roomInfo}/&gt;
               
                 {/* &lt;Link to={`/room/${room.id}`}&gt;&lt;/Link&gt; */}
              
                  &lt;Link to={`/room/${room.id}`}&gt;
                  &lt;Button&gt;
                  Join Room
                  &lt;/Button&gt;
                  &lt;/Link&gt;
                  
                &lt;/ListItem&gt;))}
         &lt;/GridItem&gt;
  </code></pre>
  <p>app.js</p>
  <pre><code>function App() {
    return (
      &lt;Router&gt;
        &lt;Layout&gt;
          &lt;Switch&gt;
            &lt;PrivateRoute exact path=&quot;/&quot;&gt;
              &lt;Homepage /&gt;
            &lt;/PrivateRoute&gt;
            &lt;PrivateRoute exact path=&quot;/create-room&quot;&gt;
              &lt;CreateRoom /&gt;
            &lt;/PrivateRoute&gt;
            &lt;PrivateRoute exact path=&quot;/contribute&quot;&gt;
              &lt;Contribute /&gt;
            &lt;/PrivateRoute&gt;
            &lt;PrivateRoute exact path=&quot;/room/:id&quot;&gt;
              &lt;Player /&gt;
            &lt;/PrivateRoute&gt;
            &lt;Route path=&quot;/login&quot;&gt;
              &lt;LoginForm /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/confirm&quot;&gt;
              &lt;ConfirmForm /&gt;
            &lt;/Route&gt;
            &lt;Route&gt;
              &lt;NotFound /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/Layout&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>and final, player.js</p>
  <pre><code>class Player extends Component {
    constructor(){
      super();
      const params = this.getHashParams(); 
      this.state = {
        logeedIn : params.access_token ? true : false,
        currentStatus: false,
        rooms: {
        roomAdminMail: &quot;&quot;,
        roomName: &quot;&quot;,
        roomInfo: &quot;&quot;
        }, 
        nowPlaying: {
          artist_name : 'Not Checked',
          song_name: 'Not Checked',
          image: ''
        }
      }
      
  
      this.getNowPlaying = this.getNowPlaying.bind(this);
      this.getRoomInfo = this.getRoomInfo.bind(this);
      
  
      if(params.access_token){
        spotifyWebApi.setAccessToken(params.access_token);
      }
     
    }
  
    getRoomInfo = () =&gt; {
      const db = firebase.firestore();
      db.collection('rooms').doc(&quot;H5H2XjdwCyrsAboQeRxT&quot;).get()
      .then((doc) =&gt; {
          if (doc.exists) {
            this.setState( {
              rooms: {
                roomAdminMail: doc.data().roomAdminMail,
                roomName: doc.data().roomName,
                roomInfo: doc.data().roomInfo
              }
            })
            
          } else {
             console.log(&quot;No such document!&quot;);
          }
        }
        
      )
    }
  </code></pre>
  <p>All I want is to send the room.id I use when routing links in homepage.js to the getRoomInfo function in Player.js, that is to make it available as db.collection('rooms').doc(roomId).get()</p>