I am doing this task, which is creating a PM System in React.
So main functionality is having a list of projects, which have to be acquired from a JSON file (It is made clear that I should not use a DB). So on the home page we have a list of projects and we should be able to click on any one of them and when clicked a new page should open. The new page will display the project with additional information - the tasks in the project and their status.
I assume I should do this with routing, but I have basic understanding of React, although I find it interesting. So how should I approach this, should I wrap my project component in a Link? Also when I open the new page how do I render the same component but with additional info?
Below you can find my code so far:
App.js
import logo from './logo.svg';
import './App.css';
import {Projects} from './components/Projects'
import {Header} from './Header.js'
function App() {
return (
<div className="App">
<Header />
<Projects />
</div>
);
}
export default App;
Project.js
import React from "react";
export const Project = ({name}) => {
console.log(name)
if (!name) return <div />;
return (
<table>
<tbody>
<tr>
<td>
<h5>{name}</h5>
</td>
</tr>
</tbody>
</table>
);
};
Projects.js
import React from "react";
import data from "../data/data.json";
import {Project} from "./Project.js";
export const Projects = () => {
return (
<>
<div className="project-container">
{data.map((data) => {
console.log(data)
return (
<div key={data.Name}>
<Project
name={data.Name}
/>
</div>
);
})}
</div>
</>
);
};
You need to make dynamic routes with react-router-dom.
Here you provide dynamically parameter "id";
Adding link to react-router-dom documentation - https://reactrouter.com/docs/en/v6/getting-started/tutorial
import { Route, Routes } from 'react-router-dom';
import { DetailPage } from '../pages/DetailPage';
export const useRoutes = () => {
return (
<Routes>
<Route path="/detail/:id" element={<DetailPage />} />
</Routes>
);
};
Then you create a Page component to display data about your chosen project.
import { Project } from '../components/Project';
export const DetailPage = () => {
/*
You can get your ID param with react-router-dom hook - useParams();
const { id } = useParams();
Your custom logic for getting data for the project which you want
to show on this page and drop it into your Project component.
*/
return <Project project={project} />;
};
In your case, you can fetch a list of your projects from DB, then render them as a list and provide everyone onClick with redirecting to the path with an id of the current project. After clicking, you will have such id and fetch data for a current project and render it then. In your case, you can fetch a list of your projects from DB, then render them as a list and provide everyone onClick with redirecting to the path with an id of the current project. After clicking, you will have a project id in your route and fetch data for a current project and render it then.