Using props in a functional component

Question

I have a React Bootstrap Table2 table functional component which gets data from a single API (at the moment) and presents the data in a table.

As part of the column definition of the table I process certain values and make them links. When a user clicks the link they will go to a page that renders the same table but with a subset of the data.

I am trying to add some logic to the component so that I can associate the various link paths with different API endpoints (e.g. if path is foo, api end point is bar, if path is foo2, api endpoint is bar2 - which then get passed to axios).

My thought was to try to use props.match.path and when there are multiple parts in the path (/section1/sub-section/sub-sub-section) break these apart and map to API endpoints.

However I cannot access props in my functional component. Is my approach the best way to do this (and if so how can I best access the data I need), or is there a better way to do this?

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import React, { useState, useEffect } from "react";
import axios from "axios";

const columns = [
  {
    dataField: "_id",
    hidden: true,
  },
  {
    dataField: "card_id",
    text: "Card Id",
    sort: true,
  },
  {
    dataField: "team",
    text: "Team",
    formatter: (rowContent, row) => {
      console.log(row);
      return (
        <>
          {/* {rowContent} */}
          <a
            target="_blank"
            rel="noopener noreferrer"
            // href={`${links[row.id]}`}
            href={`http://www.bbc.co.uk/${rowContent}`}
            // href={`http://www.bbc.co.uk/${row.card_id}`}
            style={{
              marginLeft: "12px",
            }}
          >
            {rowContent}
          </a>
        </>
      );
    },
  },
  {
    dataField: "brand",
    text: "Brand",
    sort: true,
  },
  {
    dataField: "career_stage",
    text: "Career Stage",
    sort: true,
  },
  {
    dataField: "forTrade",
    text: "For Trade",
    sort: true,
  },

  {
    dataField: "player",
    text: "Player",
    formatter: (rowContent, row) => {
      console.log(row);
      return (
        <>
          {/* {rowContent} */}
          <a
            target="_blank"
            rel="noopener noreferrer"
            // href={`${links[row.id]}`}
            href={`http://www.bbc.co.uk/${rowContent}`}
            // href={`http://www.bbc.co.uk/${row.card_id}`}
            style={{
              marginLeft: "12px",
            }}
          >
            {rowContent}
          </a>
        </>
      );
    },
  },
  {
    dataField: "series",
    text: "series",
  },

  /* {
    dataField: "price",
    text: "Price",
    formatter: (cell, row) => {
      return <p>${cell}</p>;
    },
    sort: true,
    sortFunc: (a, b, order, dataField, rowA, rowB) => {
      const numA = parseFloat(a);
      const numB = parseFloat(b);
      if (order === "asc") {
        return numB - numA;
      }
      return numA - numB; // desc
    },
  }, */
];

const BasicTable = () => {
  const [data, setData] = useState([]);
  console.log(data);

  useEffect(() => {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/cards-fvyrn/service/Cards/incoming_webhook/getAllCards"
      )
      .then((response) => {
        setData(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return (
    <BootstrapTable
      keyField="id"
      data={data}
      columns={columns}
      striped
      hover
      condensed
      pagination={paginationFactory()}
    />
  );
};

export default BasicTable;

Edit - OK, sorry for the stupid question. RTFM. I've posted an answer in case it's useful for other newbies who are following tutorials other than the one n the React site.

Answer 1

Sorry for the dumb question. If it's useful to anyone yu just need to pass in props as an argument const SingleCard = (props) => {....} then use in the component e.g. props.match.path