I am trying to open a new page from the home page where the data is passed on clicking the item on the list. The code I have works for older versions of react-router-dom I believe. Can someone tell me how can I do the same thing in newer version of React? I need to display the ID and title in the new page.
I tried to follow the example here https://codesandbox.io/s/focused-wright-w8il9?file=/src/ViewUserDetails.js:354-377
The error says AppPage.js:15 Uncaught TypeError: Cannot read properties of null (reading 'DUMMY_DATA')
If there are any corrections otherwise too, please correct me. I'm new to this.
Thank You.
GridList.js
import React from "react";
import ReactDOM from "react-dom";
import { Link, useNavigate } from "react-router-dom";
import { Component } from "react";
import GridItem from "./GridItem";
import AppPage from "./AppPage";
import classes from "./GridList.module.css";
import App01 from "./app-01.png";
import App02 from "./app-02.png";
const GridList = (props) => {
const DUMMY_DATA = [
{
title: "tic tac toe",
id: 1,
image: App01,
},
{
title: "snake",
id: 2,
image: App02,
},
];
return (
<div className={classes.gridc1}>
{DUMMY_DATA.map((item) => {
return (
<div key={item.id}>
<Link
to={{
pathname: `/apppage/${item.id}`,
state: { DUMMY_DATA: item },
}}
>
<GridItem key={item.id} image={item.image} />
</Link>
</div>
);
})}
</div>
);
};
export default GridList;
AppPage.js
import React from "react";
import {ReactDOM, render } from "react-dom";
import { useLocation } from "react-router-dom";
import { Component } from "react";
const AppPage = _ => {
const { state }= useLocation();
return (
<div>
<p>{state.DUMMY_DATA.id}</p>
<p>{state.DUMMY_DATA.title}</p>
</div>
);
};
export default AppPage;
I have solved this by following a documentation for upgrading to v6 react-router-dom and it finalllllly worked. Here it is: https://reactrouter.com/docs/en/v6/getting-started/tutorial
The solution was simple. I was just looking for a better documentation for upgrading from v5 to v6, I guess.
Also, I will attach the code if it's gonna help anybody here. (I have renamed a few things like 'DUMMY_DATA' to 'items' just for my convenience. The code would explain it clearly anyway ). If there are any doubts further, do comment and I'll try to reply! :)
GridList.js
import React from "react";
import ReactDOM from "react-dom";
import { Link, useParams } from "react-router-dom";
import { Component } from "react";
import GridItem from "./GridItem";
import AppPage from "./AppPage";
import classes from "./GridList.module.css";
import { getItems } from "./Data";
let items = getItems();
const GridList = (props) => {
return (
<div className={classes.gridc1}>
{items.map((item) => {
return (
<div key={item.id}>
<Link to={`/apppage/${item.id}`} key={item.id}>
<GridItem key={item.id} image={item.image} />
</Link>
</div>
);
})}
</div>
);
};
export default GridList;
Data.js
import React from "react";
import ReactDOM, { render } from "react-dom";
import App01 from "./app-01.png";
import App02 from "./app-02.png";
let items = [
{
title: "tic tac toe",
id: 1,
image: App01,
},
{
title: "bytes",
id: 2,
image: App02,
},
];
export function getItems() {
return items;
}
export function getItem(id) {
return items.find((item) => item.id === id);
}
AppPage.js
import React from "react";
import ReactDOM, { render } from "react-dom";
import { useParams } from "react-router-dom";
import { Component } from "react";
import { getItem } from "./Data";
const AppPage = _ => {
let params = useParams();
let item = getItem(parseInt(params.id, 10));
return (
<div>
<p ptitle = {item.title} />
<p pid = {item.id}> />
</div>
);
};
export default AppPage;
import React from "react";
import ReactDOM, { render } from "react-dom";
import Body from "../ui/Body";
import Head from "../ui/Head";
import Tail from "../ui/Tail";
import { useLocation } from "react-router-dom";
import { Component } from "react";
const AppPage = () => {
//don't forget to use this, good luck :)
const { state } = useLocation();
return (
<div>
// and use "state", don't use static
// what is static ?
<p>{state.DUMMY_DATA.id}</p>
<p>{state.DUMMY_DATA.title}</p>
</div>
);
};
export default AppPage;