I have a parent React component (DeadletterQueues) that maps out a two dimensional array of objects and passes an array of objects as props to my child component (QueueCards) and then renders them.
I have currently working code that renders all these cards (bootstrap) on the same "page" at /deadletters/. My goal is to render each array of cards on a separate "page" at /deadletters/queues/:queueName.
It seems like the answer to this using react-router is using URL params and a match function (not sure how match works). I've found plenty of example/tutorials of this, but I'm using Typescript. I've played around for a while and am having trouble adapting any solutions with Typescript (I've tried the solution here but wasn't able to get anywhere with it).
interface Props {
deadletterQueues: any
}
interface State {}
@observer
class DeadletterQueues extends Component<Props, State> {
constructor(props: any) {
super(props);
}
render() {
let allQueueCards =
this.props.deadletterQueues.map((deadletters) =>
<QueueCards deadletters={deadletters} />
);
return (
<>
{allQueueCards}
</>
);
}
}
export default DeadletterQueues;
interface Props {
deadletters: any;
}
interface State {}
@observer
class QueueCards extends Component<Props, State> {
constructor(props: any) {
super(props);
}
render() {
let deadletterCards =
this.props.deadletters.map((deadletter) =>
<DeadletterCard deadletter={deadletter} />
);
return (
<div>
<h3>Name of Queue: </h3>
{ deadletterCards }
</div>
);
}
}
export default QueueCards;
How can I modify my working code to instead render my cards on seperate pages for each queue using react-router parameters and typescript? I'm also using mobx, but I don't think that matters here.
Appreciate any help and insight!