I’m building a Dashboard to visualize a few NLP experiments.

Here’s a snippet from the Dashboard component (.tsx) I’ve currently written:

import { Dispatch, SetStateAction, useEffect, useState } from "react";

import ControlGroup from "./ControlGroup";
import { DocumentResponse } from "../types/api";
import { ErrorType } from "../App";
import TextItem from "./TextItem";
import TextItemSkeleton from "./TextItemSkeleton";
import { buttonData } from "../lib/data";

type DashboardProps = {
  setError: Dispatch<SetStateAction<ErrorType>>;
};
const MAX_LOAD_DOCUMENTS = 3;

const Dashboard = ({ setError }: DashboardProps) => {
  const [documentsLoaded, setDocumentsLoaded] = useState(false);
  const [documents, setDocuments] = useState<Array<string>>(Array(3).fill(""));

  useEffect(() => {
    const handleLoadDocuments = async () => {
      ...
    };
    handleLoadDocuments();
  }, []);

  const handleToLowercase = async () => {
    try {
      setDocumentsLoaded(false);
      setError({
        message: `Converting documents into lowercase...`,
        type: "warning",
      });
      const response = await fetch(
        "http://127.0.0.1:5000/preprocess?" +
          new URLSearchParams({
            do: "lowercase",
          }).toString(),
      );
      const result: DocumentResponse = await response.json();
      setDocuments(result.documents);
      setDocumentsLoaded(true);
      setError({
        message: `All documents converted to lowercase.`,
        type: "success",
      });
    } catch (error) {
      setError({
        message: `Couldn't convert to lowercase: ${error}`,
        type: "error",
      });
    }
  };

  return (
    <main className="flex flex-1 flex-row gap-4 overflow-y-auto p-4">
      <section className="document-list flex-1 overflow-y-auto pr-4 pt-4">
        {documentsLoaded
          ? documents.map((text, index) => (
              <TextItem key={`text-${index}`} text={text} index={index} />
            ))
          : documents.map((_, index) => (
              <TextItemSkeleton key={`text-skeleton-${index}`} />
            ))}
      </section>
      <section className="document-controls flex-1">
        {buttonData.map((group, index) => (
          <ControlGroup
            key={`control-group-${index}`}
            groupTitle={group.groupTitle}
            buttons={group.buttons}
          />
        ))}
      </section>
    </main>
  );
};

export default Dashboard;

export type { DocumentResponse };

You might see that towards the end of the above component, I’m rendering an array of buttons (buttonData.map(...)).

Each button is actually found within another component called ControlGroup – but this is all ready from an array which looks like this:

const buttonData = [
  {
    groupTitle: "Text preprocessing",
    buttons: [
      { text: "To lowercase", disabled: false, onClick: () => {} },
      { text: "Remove punctuation", disabled: true, onClick: () => {} },
      { text: "Lemmatization", disabled: true, onClick: () => {} },
      { text: "Porter Stemmer", disabled: true, onClick: () => {} },
    ],
  },
  ...
]

There’s also a function called handleToLowercase() defined within the Dashboard.tsx component – this is relevant for later.

To each button, I’ve added an onClick attribute – which basically is the function that should run when that button is clicked.

What I want to do is specify handleToLowercase() as the onClick attribute’s value of that button in the buttonData array.

I initially exported the handleToLowercase callback and tried importing it from the script that contains the buttonData array – but this didn’t work since my callback uses state (i.e. setDocumentsLoaded, setError, etc.) which is only accessible from within the Dashboard component.

Also, I don’t think exporting such callbacks is a best practice + feel that there might be some use in a state management library here – but please correct me if I’m wrong.

Any ideas as to how I can render the buttons from the buttonData array, while also connecting each button to the respective callback within the Dashboard.tsx component which uses state?

Appreciate any help, thanks for taking the time to read my question until the end!