Render the detailed page when clicking on a linked item on the sidebar menu

Question

I am working on the sidebar. Currently, I have a few items on my sidebar. When I select an item, it shows a few details on the main area. Actually, I have a large amount of data that I want to show on a selected sidebar item. The data might be different for each sidebar item. I think a react component rendering is a good option to display the data but I am confused about how to achieve this. I am sharing my full code here to understand it.

Invoices

import { NavLink, Outlet, useSearchParams } from 'react-router-dom';
import { getInvoices } from '../data';

export default function Invoices() {
    let invoices = getInvoices();
    let [searchParams, setSearchParams] = useSearchParams();

    return (
        <div style={{ display: 'flex' }}>
            <nav
                style={{
                    borderRight: 'solid 1px',
                    padding: '1rem',
                }}>
                <input // search input
                    value={searchParams.get('filter') || ''}
                    onChange={(event) => {
                        let filter = event.target.value;
                        if (filter) {
                            setSearchParams({ filter });
                        } else {
                            setSearchParams({});
                        }
                    }}
                />

                {invoices // set search params
                    .filter((invoice) => {
                        let filter = searchParams.get('filter');
                        if (!filter) return true;
                        let name = invoice.name.toLowerCase();
                        return name.startsWith(filter.toLowerCase());
                    })
                    .map((
                        invoice // active list color
                    ) => (
                        <NavLink
                            style={({ isActive }) => {
                                return {
                                    display: 'block',
                                    margin: '1rem 0',
                                    color: isActive ? 'red' : '',
                                };
                            }}
                            to={`/invoices/${invoice.anumber}`}
                            key={invoice.anumber}>
                            {invoice.name}
                        </NavLink>
                    ))}
            </nav>
            <Outlet />
        </div>
    );
}

please find whole code in the link

Answer 1

I have gone through that tutorial which is the same as your code. If I were you, I will redesign the getInvoice method to fetch the corresponding item from your database. The item from the database should be as text or blob to store a large amount of data such as text or media including URLs, images and video links. As you know, the getInvoice method in the tutorial is simplified by returning a bit of text while yours could be more complex to fetch the appropriate data from the data warehouse or something along those lines.

For example:

export default function Invoice() {
  let params = useParams();
  let invoice = getInvoice(parseInt(params.invoiceId, 10));
  return (
    // here is your logic implementation
  );

I hope that would be helpful.