How can I send data from one component to another without calling that component in React?

Question

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.

homepage.js

 <Heading as="h1" mb={6}>
            Rooms
            </Heading>
            <Divider orientation="horizontal" />
           {rooms.map((room)=> (
              <ListItem>
              <ListItemText primary={room.roomName} secondary={room.roomInfo}/>
             
               {/* <Link to={`/room/${room.id}`}></Link> */}
            
                <Link to={`/room/${room.id}`}>
                <Button>
                Join Room
                </Button>
                </Link>
                
              </ListItem>))}
       </GridItem>

app.js

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          <PrivateRoute exact path="/">
            <Homepage />
          </PrivateRoute>
          <PrivateRoute exact path="/create-room">
            <CreateRoom />
          </PrivateRoute>
          <PrivateRoute exact path="/contribute">
            <Contribute />
          </PrivateRoute>
          <PrivateRoute exact path="/room/:id">
            <Player />
          </PrivateRoute>
          <Route path="/login">
            <LoginForm />
          </Route>
          <Route path="/confirm">
            <ConfirmForm />
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Layout>
    </Router>
  );
}

and final, player.js

class Player extends Component {
  constructor(){
    super();
    const params = this.getHashParams(); 
    this.state = {
      logeedIn : params.access_token ? true : false,
      currentStatus: false,
      rooms: {
      roomAdminMail: "",
      roomName: "",
      roomInfo: ""
      }, 
      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 = () => {
    const db = firebase.firestore();
    db.collection('rooms').doc("H5H2XjdwCyrsAboQeRxT").get()
    .then((doc) => {
        if (doc.exists) {
          this.setState( {
            rooms: {
              roomAdminMail: doc.data().roomAdminMail,
              roomName: doc.data().roomName,
              roomInfo: doc.data().roomInfo
            }
          })
          
        } else {
           console.log("No such document!");
        }
      }
      
    )
  }

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()

Answer 1

In player.js you can use this.props.match.params.id .

match.params are key/value pairs parsed from the URL corresponding to the dynamic segments of the path

More info here: https://reactrouter.com/web/api/match

Answer 2

Use Events. A CustomEvent is one native solution you could start with, or you can use an event bus .