score:2

Accepted answer

another possible solution, is to use context api.

// steppercontent.jsx
...

export const steppercontentcontext = createcontext();
export const usesteppercontent = () => usecontext(steppercontentcontext);

export const steppercontentprovider = ({ children }) => {
  ...

  const value = { activestep, handlenext, handleback, handlereset };

  return (
    <steppercontentcontext.provider value={value}>
      {children}
    </steppercontentcontext.provider>
  );
};

so instead of using steppercontent, you can now use usesteppercontent hook.

// horizontalformstepper.jsx
...
import {
  getstepcontent,
  getsteps,
  usehorizontalstyles,
  usesteppercontent
} from "./common/steppercontent";

const horizontalformstepper = () => {
  const classes = usehorizontalstyles();
  const {
    activestep,
    handlereset,
    handleback,
    handlenext
  } = usesteppercontent();
  ...

edit sleepy-bell-2pgq2

might be overkill, but it's there.


Related Query

More Query from same tag