Using props in a functional component - reactjs

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