How to pass from route to react component that is a child in a nested component

Question

I have a react component that fetches list of gyms from my REST API built in ASP.NET Core. That render component is a table that has one row for each record in my database. In each row I have 1 column that displays the name of the gym, 1 column that displays a button that renders a component called "ViewMembers".

ViewMembers is a component that works similarly to the ListGyms component, but instead of fetching the gyms, I am supposed to fetch the members in that particular gym. However, here comes my problem. I am not sure how to pass the id as prop to my ViewMembers components, because that's where I need to fetch the members, and I need to pass the id from the gym.

My second component displays a form, that allows you to update the particular gym. Here I have the same problem, which is, that I am unsure how to pass the id prop from the ListGyms.

I need some guidance.

I have tried some of the suggestions, and I still did not fix my problem.

Here is my code.

ListGyms.js

class ListOfGyms extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            gyms: [],
            isItClicked: false,
            isItClickedMember: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleChangeForMember = this.handleChangeForMember.bind(this);

    }
    componentDidMount() {
        axios.get('https://localhost:44345/api/gyms')
            .then(res => {
                const gyms = res.data;
                this.setState({ gyms });
                console.log("GYMS", gyms);
            })
            .catch(err => {
                console.log(err);
            })
    }
    handleChange(e) {
        e.preventDefault();
        this.setState({
            isItClicked: true,
            isItClickedMember: false
        })
        console.log("heh");

    }
    handleChangeForMember(e) {
        e.preventDefault();
        this.setState({
            isItClickedMember: true,
            isItClicked: false
        })
        console.log("View Member Component")
    }
    
    renderTableData() {
        return this.state.gyms.map((gym) => {
            
            return (
                <tr key={gym.id}>
                    <td>
                    <label for="gymName">Gym Name: {gym.gymName}</label>
                    </td>
                    <td>
                    <button onClick={this.handleChange}>Edit</button>
                    </td>
                    <td>
                    <button onClick={this.handleChangeForMember}>View Members</button> 
                    </td>
                </tr>
            ) 
        })
    }
    render() {
        if (this.state.isItClicked) {
            return (
                <>
            <div class="container" className="ListOfGyms">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>List of Gyms</h2>
                    </div>
                </div>
            <table id='gyms' class="table table-dark">
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
            </div>
                    <EditGym/>
                    
                    
                </>
          )
        }
        if (this.state.isItClickedMember) {
            return (
                <>
            <div class="container" className="ListOfGyms">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>List of Gyms</h2>
                    </div>
                </div>
            <table id='gyms' class="table table-dark">
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
            </div>
            <ViewMembers/>
             </>
            )}
            
        
        
        return (
            <div class="container" className="ListOfGyms">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>List of Gyms</h2>
                    </div>
                </div>
            <table id='gyms' class="table table-dark">
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
            </div>
        )
    }
}
export default ListOfGyms;

import logo from './logo.svg';
import './App.css';
import ListOfGyms from './components/ListGyms';
import AddAGym  from './components/AddGym';
import { Route, Switch, Link, BrowserRouter as Router } from 'react-router-dom';
import { ListGroup, Nav,  Navbar } from 'react-bootstrap';
import EditGym from './components/EditGym';
import EditMember from './components/EditMember';


function App() {
  return (
    
    <Router>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="">Gym Management Application</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href='/'>Home</Nav.Link>
            <Nav.Link href='/create'>Add Gym</Nav.Link> 
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Switch>
      <Route exact path="/" component={ListOfGyms}/>
      <Route exact path="/:id" render={(props) => <EditGym id={props.id} />}>/</Route>
      <Route path="/create" component={AddAGym}/>
      
      </Switch>   
    </Router>
    
   
  );
}

export default App;

Answer 1

Assuming you want to pass the gym id to the view members component you can do some like this.

In your button in the table you want to do this:

<button onClick={() => handleChangeForMember(gym.id)}></button> 

handleChangeForMember = (id) => {
        this.setState({
            isItClickedMember: true,
            isItClicked: false
        })
        let history = this.props.history; // history object from react-router-dom
        history.push(`/members/${id}`);
    }

Please note that I used an arrow function the binding of this is automatically handled so you wont be required to set a bind of this for this function in the class constructor.

Then in App.js just define a new route something like:

<Route path="/memebers/:id" component={ViewMembers} />

then finally in that ViewMembers component you can use react-router-dom to access the id from the url like this:

const { id: gymId} = this.props.match.params; // for class component

or

const { id: gymId } = props.match.params; // for functional component