2

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!

Rial Johnson
  • 194
  • 1
  • 3
  • 14

0 Answers0