In React, how can I show full item information when selecting a component from a list?

I’m new to coding, new to react and js!
I need a little help with a coding task my supervisor gave me in making an application to classify and scan items with a barcode.
So I got a list of items, wich are made in my "Item "component, with their date of registration, number id, and some other infos in their preview on screen.

Once I have this list, my objective is to make possible to click on any of them, and get access in a new window, to its full informations.

The only thing I know wich is closest to my target was a modal window… But this would sacrifice precious space on the screen, and I need to render a lot of information.

That’s why I need your help!

Here is my code, thanks for your help in advance!

import "./DummyItem.css"
import DummyDate from "./DummyDate"

export default function DummyItem(props) {


  return (
    <div className= "dummy-item">
      {/* <DummyDate date={"20/12/2339"} /> */}
      <DummyDate />
      <div className={"dummy-item__description"}>
        <h2>{props.description}</h2>
        <p>Annotations: {props.annotation}</p>
        <button type="button" className="dummy-item__inventory" onClick={() => alert('Show Details')}>Inventory ID: {props.InventryID}</button>

      </div>

    </div>
  )
}

I’ve tried to make a modal window, but it has no sense.
And now my link to item details it’s located in a button, wich once clicked log on console.
I need to click in any point of my item preview to get access in a new "page" containing its
full details.

>Solution :

To achieve your objective of displaying the full details of an item in a new page when clicked, you can use React Router to handle the navigation and create a separate component for the item details page.

Here’s an example of how you can modify your code to implement this:

First, make sure you have React Router installed in your project. You can install it by running the following command in your project directory:

npm install react-router-dom

Create a new component for the item details page. Let’s call it ItemDetails.js. This component will receive the item details as props and display them:

import React from "react";

export default function ItemDetails(props) {
  return (
     <div>
       <h2>{props.description}</h2>
       <p>Annotations: {props.annotation}</p>
       {/* Display other item details */}
    </div>
  );
 }

Update your DummyItem component to use React Router’s Link component instead of a button. Replace the button element with the Link component and pass the item details as URL parameters:

import React from "react";
import { Link } from "react-router-dom";

export default function DummyItem(props) {
  return (
    <div className="dummy-item">
      {/* Your item preview content */}
      <Link to={`/item/${props.itemId}`}>
        <div className="dummy-item__description">
          <h2>{props.description}</h2>
          <p>Annotations: {props.annotation}</p>
        </div>
      </Link>
    </div>
  );
}

Update your App.js file to define the routes using React Router. Add a new route that maps to the ItemDetails component:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import ItemDetails from "./pages/ItemDetails";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/item/:itemId" element={<ItemDetails />} />
      </Routes>
    </Router>
  );
}

In your Home component (or wherever you’re rendering the list of items), make sure you pass the necessary props to the DummyItem component, including the item ID:

import React from "react";
import DummyItem from "../components/DummyItem";

export default function Home() {
  // Assuming you have an array of items
  const items = [
    {
      itemId: 1,
      description: "Item 1",
      annotation: "Annotation 1",
      // Other item details
    },
    // Other items
  ];

  return (
    <div>
      {items.map((item) => (
        <DummyItem
          key={item.itemId}
          itemId={item.itemId}
          description={item.description}
          annotation={item.annotation}
          // Pass other item details as props
        />
      ))}
    </div>
  );
}

With these modifications, when you click on an item in the list, React Router will navigate to the item details page (/item/:itemId) and render the ItemDetails component, displaying the full details of the selected item.