Question 177494 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. 0

    You can do it with React Router if you want a new page. With "useNavigate"

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search