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

How do I define a React component to use an interchangeable context?

I have the following component:

export const ActionCell = () => {
  const {
    edit,
    handleEditComplete,
    handleEditCancel,
    handleEdit,
    handleDelete,
  } = useRow();

  return (
    <StyledActionCell>
      <Group>
        {edit ? (
          <>
            <Complete onClick={handleEditComplete} />
            <Cancel onClick={handleEditCancel} />
          </>
        ) : (
          <>
            <Edit onClick={handleEdit} />
            <Delete onClick={handleDelete} />
          </>
        )}
      </Group>
    </StyledActionCell>
  );
};

I want to reuse this component across my application, but with different contexts using the same API. So all functions and variables coming from the hook would be available but the implementation of the logic in the provider is different. How would I go about implementing this?

Currently the useRow references one of the 2 contexts, so it will error when using the context which is not referenced.

Best Regards

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was thinking about it a bit more and could edit the component to inject the function:

    interface ActionCellProps {
  useRow: () => RowContextProps;
}

export const ActionCell = ({ useRow }: ActionCellProps) => {
  const {
    edit,
    handleEditComplete,
    handleEditCancel,
    handleEdit,
    handleDelete,
  } = useRow();

  return (
    <StyledActionCell>
      <Group>
        {edit ? (
          <>
            <Complete onClick={handleEditComplete} />
            <Cancel onClick={handleEditCancel} />
          </>
        ) : (
          <>
            <Edit onClick={handleEdit} />
            <Delete onClick={handleDelete} />
          </>
        )}
      </Group>
    </StyledActionCell>
  );
};

    If anyone has a better idea I would love to hear it though.


  2. 0

    Do you want to use the useRow hook to obtain the values provided by different contexts? If so, I can provide an idea.

    First create your context and hook:

    import { createContext, useContext } from "react";

export const ContextA = createContext(null)

export const ContextB = createContext(null)

export const useRow = () => {
  const dataA = useContext(ContextA)
  const dataB = useContext(ContextB)
  return dataA || dataB
}

    import useRow to use any where under the ContextA or ContextB.

    const ActionCell = () => {
  const {
    edit,
    handleEditComplete,
    handleEditCancel,
    handleEdit,
    handleDelete,
  } = useRow();
  return (
    <StyledActionCell>
      <Group>
        {edit ? (
          <>
            <Complete onClick={handleEditComplete} />
            <Cancel onClick={handleEditCancel} />
          </>
        ) : (
          <>
            <Edit onClick={handleEdit} />
            <Delete onClick={handleDelete} />
          </>
        )}
      </Group>
    </StyledActionCell>
  );
}

    And do not pass a hook as component props. read about Rules of Hooks and Calling a React hook conditionally.

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

Back To Top
Search