title: React - pass id from state on client to axios.get on express server
body: <p>I am trying to pass the id from my React app to axios.get on the server side (Express) so I get this:</p>
  
  <pre><code>    //get
  app.get('/api/siteDashboard', (req, res, next) =&gt; {
      axios.get('https://****/api/site?id=3d5a6a8a-60d4-4488-1401-08d74bf02cbf')
      .then(response =&gt; res.json(response.data))
          .catch(err =&gt; next(err));
  })
  </code></pre>
  
  <p>On the client side I have a datatable and each row has a link to a new page.  The data for the datatable is coming from the api.  I want to be able to click the link for a specific row and grab its ID from the api and open the new page based on this ID.</p>
  
  <pre><code>    &lt;Link to="/Sites/SiteDashboard"&gt;
          &lt;MDBIcon icon="fa fa-external-link-alt" size="lg" className='green-text cursor-pointer' /&gt;
      &lt;/Link&gt;
  </code></pre>
  
  <p>I am fetching the route from the server like this in my client side React app..</p>
  
  <p>componentDidMount() {</p>
  
  <pre><code>this.setState({ loading: true });
  
  //const { match: { params }} =this.props
  
  //fetch(`/api/site/?id=${this.state.siteDashboard}`)
  fetch(`/api/siteDashboard`)
      .then(res =&gt; res.json())
      .then(data =&gt; {
          this.setState({
              siteData: data,
              loading: false,
          })
      })
  </code></pre>
  
  <p>So basically, rather than hard coding the id into the axios.get request, I need to dynamically grab this from the link on the client side.  Im not sure if I am approaching this the right way so any advice appreciated.  Thanks.</p>
  
  <p>React code...</p>
  
  <pre><code>import React from 'react'
  import { Redirect } from "react-router-dom";
  import styled from 'styled-components';
  import DataTable, { memoize } from 'react-data-table-component'
  import Moment from 'react-moment';
  import Spinner from '../../Spinner'
  import { BrowserRouter as Route, Link } from "react-router-dom";
  import { MDBContainer, MDBCard, MDBCardBody, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
  
  //import SiteDashboard from './SiteDashboard';
  import SiteAdd from './SiteAdd'
  import SiteDashboard from './SiteDashboard'
  
  const TextField = styled.input`
    height: 32px;
    width: 300px;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    padding: 16px;
  
    &amp;:hover {
      cursor: pointer;
    }
  `;
  
  
  const Filter = ({ onFilter }) =&gt; (
      &lt;TextField id="search" type="search" role="search" placeholder="Search Title" onChange={e =&gt; onFilter(e.target.value)} /&gt;
  );
  
  const columns = memoize(clickHandler =&gt; [
      {
          name: 'Online',
          selector: 'cloudAccessEnabled',
          sortable: true,
          minWidth: '10px',
          center: true,
          cell: row =&gt; (
              &lt;MDBIcon icon="circle"
                  className={row.cloudAccessEnabled === true ? 'green-text' : 'red-text'} /&gt;
          )
      },
      {
          name: 'Site Ref.',
          selector: 'siteRef',
          sortable: true,
          wrap: true,
          minWidth: '40px',
      },
      {
          name: 'Name',
          selector: 'name',
          sortable: true,
          wrap: true,
          minWidth: '80px',
      },
      {
          name: 'Address Type',
          sortable: true,
          wrap: true,
          minWidth: '100px',
          //dont show this column
          hide: 6000,
          cell: row =&gt; (
              &lt;div&gt;
                  {row.addresses &amp;&amp; row.addresses.map(
                      ({ addressType, id }) =&gt; (
                          &lt;div key={id}&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;{addressType}&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      ))}
              &lt;/div&gt;
          )
      },
      {
          name: 'Address',
          selector: 'address',
          wrap: true,
          minWidth: '100px',
          cell: row =&gt; (
              &lt;div&gt;
                  {row.addresses &amp;&amp; row.addresses.map(
                      ({ addressType, address1, address2, city, county, postCode, country, id }) =&gt; (
                          &lt;div key={id}&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;strong&gt;{addressType}&lt;/strong&gt;&lt;/li&gt;
                                  &lt;li&gt;{address1}&lt;/li&gt;
                                  &lt;li&gt;{address2}&lt;/li&gt;
                                  &lt;li&gt;{city}&lt;/li&gt;
                                  &lt;li&gt;{county}&lt;/li&gt;
                                  &lt;li&gt;{postCode}&lt;/li&gt;
                                  &lt;li&gt;{country}&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      ))}
              &lt;/div&gt;
          )
      },
      {
          name: 'Control Panel',
          selector: 'controlPanel',
          minWidth: '70px',
          wrap: true,
          cell: row =&gt; (
              &lt;div&gt;
                  {(row.controlpanel == null) ?
                      &lt;div&gt;no CP assigned&lt;/div&gt; : row.controlpanel}
              &lt;/div&gt;
          )
      },
      {
          name: 'Last Maintenance',
          selector: 'lastMaintenance',
          defaultSortAsc: true,
          sortable: true,
          wrap: true,
          minWidth: '100px',
          //hide: 1030,
          cell: row =&gt; (
              &lt;Moment format="DD/MM/YYYY HH:mm"&gt;{row.lastMaintenance}&lt;/Moment&gt;
          )
      },
      {
          name: 'Next Maintenance',
          selector: 'nextMaintenance',
          sortable: true,
          wrap: true,
          minWidth: '100px',
          //hide: 1030,
          cell: row =&gt; (
              &lt;Moment format="DD/MM/YYYY HH:mm"&gt;{row.nextMaintenance}&lt;/Moment&gt;
          )
      },
      {
          name: 'Latest Result',
          selector: 'latestResult',
          sortable: true,
          minWidth: '90px',
      },
      {
          name: 'Site Dashboard',
          minWidth: '47px',
          center: true,
          cell: row =&gt; (
              &lt;MDBIcon onClick={clickHandler} icon="fa fa-external-link-alt" size="lg" className='green-text cursor-pointer' /&gt;
          )
      },
  ]);
  
  class Sites extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              loading: false,
              sites: [],
              toggledClearRows: false
          }
      }
  
      // handler for link to Site Dashboard
      handleButtonClick = () =&gt; {
          console.log("clicked");
          //&lt;Redirect to={"/Sites/SiteDashboard" + this.state.sites.id} /&gt;
      };
  
      componentDidMount() {
  
          this.setState({ loading: true });
  
          //const { match: { params } } =this.props
  
          fetch('/api/site')
              .then(res =&gt; res.json())
              .then(site =&gt; {
                  this.setState({
                      sites: site.array,
                      //cahnge to true to debug
                      loading: false
                  });
                  console.log(this.state.sites)
              })
              .catch(error =&gt; {
                  if (error.response) {
                      console.log(error.responderEnd);
                  }
              });
      }
  
      render() {
  
          // The row data is composed into your custom expandable component via the data prop
          const ExpandedSection = ({ data }) =&gt;
              &lt;MDBContainer fluid&gt;
                  &lt;p className="small mt-2"&gt;
                      &lt;strong&gt;Notes: &lt;/strong&gt;
                      {data.notes}
                  &lt;/p&gt;
              &lt;/MDBContainer&gt;
  
          //Spinner
          const CustomLoader = () =&gt; (&lt;div&gt;&lt;Spinner /&gt;&lt;/div&gt;);
          const { loading } = this.state;
  
          return (
  
              &lt;div&gt;
                  &lt;MDBCard className="full-width sites-dt"&gt;
                      &lt;MDBCardBody&gt;
                          &lt;MDBRow className="my-4 ml-1"&gt;
                              &lt;MDBCol sm="12" md="4" className="text-center text-md-left"&gt;
                                  &lt;h3&gt;Sites&lt;/h3&gt;
                              &lt;/MDBCol&gt;
                              &lt;MDBCol sm="12" md="8" className="text-center text-md-right"&gt;
                                  &lt;Route path="/Sites/SiteAdd" component={SiteAdd} /&gt;
                                  &lt;Link to={`/Sites/SiteAdd`}&gt;
                                      &lt;MDBBtn outline color="primary"&gt;
                                          &lt;MDBIcon icon="plus" /&gt; Add a new Site
                              &lt;/MDBBtn&gt;
                                  &lt;/Link&gt;
                              &lt;/MDBCol&gt;
                          &lt;/MDBRow&gt;
                          &lt;Link to={`/Sites/SiteDashboard`}&gt;temp link to Site Dashboard &lt;MDBIcon icon="fa fa-external-link-alt" size="lg" className='green-text' /&gt;
                          &lt;/Link&gt;
                          &lt;MDBRow&gt;
                              &lt;MDBCol&gt;
                                  &lt;DataTable className="responsive-table site-headers pagination-align-left"
                                      columns={columns(this.handleButtonClick)}
                                      data={this.state.sites}
                                      defaultSortField="siteRef"
                                      defaultSortAsc={false}
                                      subHeader
                                      //subHeaderComponent={&lt;Filter onFilter={value =&gt; setFilterText(value)} /&gt;}
                                      compact
                                      pagination
                                      highlightOnHover
                                      expandableRows
                                      expandableRowsComponent={&lt;ExpandedSection /&gt;}
                                      progressPending={loading}
                                      progressComponent={&lt;CustomLoader /&gt;}
                                  /&gt;
                              &lt;/MDBCol&gt;
                          &lt;/MDBRow&gt;
                      &lt;/MDBCardBody&gt;
                  &lt;/MDBCard&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  
  export default Sites
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/GHir9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GHir9.png" alt="enter image description here"></a></p>