I have a bunch of dynamically created cards and I want each of them to lead to a specific page. How do I do that ? Thanks

My code so far:

Cards that are supposed to be leading to a specific question page:

import React from 'react';
import {Card, Button} from 'react-bootstrap'
import { Link } from 'react-router-dom';

const QCard = () => {

  const cardInfo = [
        {image: "", title: "question1", text: "super hard q1"},
        {image: "", title: "question2", text: "super hard q2"},
        {image: "", title: "question3", text: "super hard q3"},
        {image: "", title: "question4", text: "super hard q4"},
        {image: "", title: "question5", text: "super hard q5"},
        {image: "", title: "question6", text: "super hard q6"},
       ]
  
  

  const renderQCard = (card, index) => {
    return (
      <Card style={{ width: '20rem' }} key={index} className="box">
        <Card.Img variant="top" src={card.image} />
        <Card.Body>
          <Card.Title>{card.title}</Card.Title>
          <Card.Text>
            {card.text}
          </Card.Text>
          <Link to="Question">
            <Button variant="primary">Answer</Button>
          </Link>
        </Card.Body>
      </Card>
    );
  }

  return <div className='App'>{cardInfo.map(renderQCard)}</div>

}

export default QCard

CodePudding user response：

With the current way your code works, I would add a key value pair link: "/toPage" to your object and get your value in the <Link> component with to={card.link}.

Example:

const cardInfo = [
    { image: "", title: "question1", text: "super hard q1", link: "/toPage" },
    // ...
];

// Now in your Link tag
<Link to={card.link}>
    <Button variant="primary">Answer</Button>
</Link>

CodePudding user response：

I saw your question in here too. I would answer for your 2 questions both.

Here is the solution

You can create question page and simply get parameters from router link (card info) and implement anything you want to do for every question. This is dynamic depending on every card you click on.

CodePudding user response：

i did not understand your question do you want to create a dynamic pages or you already created a page and just want to assign them but for the second one you could add another field in your cardInfo which is page field

  const cardInfo = [
        {image: "", title: "question1", text: "super hard q1",page:"/page1"},
        {image: "", title: "question2", text: "super hard q2",page:"/page2"},
        {image: "", title: "question3", text: "super hard q3",page:"/page3"},
        {image: "", title: "question4", text: "super hard q4",page:"/page4"},
        {image: "", title: "question5", text: "super hard q5",page:"/page5"},
        {image: "", title: "question6", text: "super hard q6",page:"/page6"},
       ]

.
.
.
.
<Link to={card.page}>
            <Button variant="primary">Answer</Button>
          </Link>

but of course you must declare theme in the routes

  <Routes>
    <Route path="/page1" element={<page1/>} />
    <Route path="/page2" element={<page2 />} />
    <Route path="/page3" element={<page3 />} />
    <Route path="/page4" element={<page4 />} />
    <Route path="/page5" element={<page5 />} />
    <Route path="/page6" element={<page6 />} />
  </Routes>

CodePudding user response：

You can use dynamic routing in react using react-router-dom

Example:

Create a component for Question:

// components/Question.js

import { useParams } from "react-router-dom";

export default function Question (props) {
  const {question} = useParams();

  return <>
    <h1>Question: {question}</h1>
  </>
}

Create dynamic route for question:

// App.js ot Index.js

import React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Question from '.components/Question'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <Routes>
            <Route path="/question/:question" element={<Question />} />
        </Routes>
    </BrowserRouter>
)

And in Card:

<Link to={`/question/${title}`}

Hope it works!

CodePudding user response：

import React from 'react'
import { Link } from 'react-router-dom'

const renderLink  = () => {
  return (
    <Link to={'/yourUrl'}>
      <button>Answer</button>
      </Link>
  )
}

When creating a Link to another page in react, wrap your element in Link tags with the 'to' attribute set to your destination.

An alternative could be setting a link key-value pair when declaring your objects. Then access that key in the 'to' attribute of Link.

myObjects = [
  {name: "Bob", age: 30, link: '/yourUrl'},
  {name: "Joe", age: 20, link: '/yourUrl'},
  {name: "Rick", age: 50, link: '/yourUrl'}
]
...

<Link to={card.link}>
  <button>Answer</button>
</Link>