Render table subheader only once in React

Question

I have created the following table in React.

The items I render have either category libraries or softwareComponents as category.

{
  items.map((component: Components) =>
    component.category === "libraries" ? (
      <React.Fragment>
        <tr>
          <th>Libraries</th>
          <th>&nbsp;</th>
        </tr>
        <tr key={component.name}>
          <td>{component.name}</td>
          <td>{component.version}</td>
        </tr>
      </React.Fragment>
    ) : (
      <React.Fragment>
        <tr>
          <th>Software Components</th>
          <th>&nbsp;</th>
        </tr>
        <tr key={component.name}>
          <td>{component.name}</td>
          <td>{component.version}</td>
        </tr>
      </React.Fragment>
    )
  );
}

The problem is that the subheader is rendered now every time but I only want to show it once.

could you add your items list ?

monim
– monim

2022-10-13 09:58:28 +00:00
Commented Oct 13, 2022 at 9:58 — monim
– monim, Commented Oct 13, 2022 at 9:58

Tehila · Accepted Answer · 2022-10-13 10:31:28Z

2

You can declare two arrays, one for libraries and one for software. Then, you map the items outside of the return statement and push each table row to the matching array.

And after that you simply return the arrays in the return statement. See codeSandbox

const libraries = [];
const software = [];

items.map((component) => {
    const tableRow = (
      <tr key={component.name}>
        <td>{component.name}</td>
        <td>{component.version}</td>
      </tr>
    );
    component.category === "libraries"
      ? libraries.push(tableRow)
      : software.push(tableRow);
  });

And your JSX:

return (
    <>
      <tr>
        <th>Libraries</th>
        <th>&nbsp;</th>
      </tr>
      {libraries}
      <tr>
        <th>Software Components</th>
        <th>&nbsp;</th>
      </tr>
      {software}
    </>
  );

edited Oct 13, 2022 at 10:31

answered Oct 13, 2022 at 10:18

Tehila

1,1227 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ehsan · Accepted Answer · 2022-10-13 10:13:36Z

you can separate item list and write like this :

const libraryList = items.filter((item) => item.category === "libraries");
const others = items.filter((item) => item.category !== "libraries");

export default function App() {
  return (
    <div className="App">
      {libraryList.length && (
        <>
          <tr>
            <th>Libraries</th>
            <th>&nbsp;</th>
          </tr>
          {libraryList.map((component) => (
            <tr key={component.name}>
              <td>{component.name}</td>
              <td>{component.version}</td>
            </tr>
          ))}
        </>
      )}
      {others.length && (
        <>
          <tr>
            <th>Software Components</th>
            <th>&nbsp;</th>
          </tr>
          {others.map((component) => (
            <tr key={component.name}>
              <td>{component.name}</td>
              <td>{component.version}</td>
            </tr>
          ))}
        </>
      )}
    </div>
  );
}

Collectives™ on Stack Overflow

Render table subheader only once in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest