1

I have below code snippets, just wondering apart from passing a component to withGroupInput, do we have another way to re-use this GroupedInputWithLabel with different components? Thanks

export const GroupedInputWithLabel = (props) => {
  const { required, children, fieldName } = props;
  const inputComponent = (
    <>
      <ControlLabel htmlFor={fieldName} required={required} />
      {children}
    </>
  );
  return <GroupedInput {...props}>{inputComponent}</GroupedInput>;
};

export const withGroupInput = (props, Component) => (
  <GroupedInputWithLabel {...props}>
    <Component {...props} />
  </GroupedInputWithLabel>
);
Yang Wang
  • 580
  • 4
  • 14
  • `withGroupInput` is a component knw. Why do you need to convert that to a hook? – Yushan Jul 09 '21 at 05:34
  • Sorry to make you confused, I mean to say react custom hooks to repeat this business logic instead of using HOC way. – Yang Wang Jul 09 '21 at 05:38
  • 1
    yeah, that's what I also tell. You cannot convert components (return a JSX element) to a react hook – Yushan Jul 09 '21 at 05:52
  • 1
    `withGroupInput` nor the `GroupedInputWithLabel` component contain any logic, what is there to convert? React hooks don't, and can't, replace React components. BTW, if you want `withGroupInput` to be a real HOC it's signature should look like `withGroupInput = Component => props => ( ..... )`. – Drew Reese Jul 09 '21 at 06:44
  • Thanks for your comments. May I please know apart from passing a component to withGroupInput do we have another way to re-use this GroupedInputWithLabel with different components? – Yang Wang Jul 09 '21 at 07:05
  • `GroupedInputWithLabel` ***is*** a React component, and designed to wrap other React components. It can be used with *any* component. Not sure if that answers your question. – Drew Reese Jul 09 '21 at 07:21
  • You can send label as prop to the component and check if label is present than render it else render only the `` tag. Check could be like `{props.label && {props.label}}` – Mohit Arora Jul 09 '21 at 07:38

0 Answers0