How to pass data to {props.children}

Question

On my follow up question from here: How to pass data from child to parent component using react hooks I have another issue. Below is the component structure

export const Parent: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const createContent = (): JSX.Element => {
  return (
    <Authorization>
    {<ErrorPanel message={errorMessage} setDisabled={setDisabled}/>}
    <MyChildComponent/>
    </<Authorization>
  );
}

return (
   <Button onClick={onSubmit} disabled={disabled}>My Button</Button>
   {createContent()}
 );
};

const Authorization: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const render = (errorMessage : JSX.Element): JSX.Element => {
    return (
      <>
      {<ErrorPanel message={errorMessage} setDisabled={setDisabled}/>}
      </>
    );
  };

return (
    <>
    <PageLoader
      queryResult={apiQuery}
      renderPage={render}
    />
    {props.children}
    </>
  );
};

How do I pass the disabled state value from Authorization component to my child which is invoked by {props.children} I tried React.cloneElement & React.createContext but I'm not able to get the value disabled to the MyChildComponent . I could see the value for disabled as true once the errorMessage is set through the ErrorPanel in the Authorization component. Do I need to have React.useEffect in the Authorization Component?

What am I missing here?

Answer 1

You need to use React.Children API with React.cloneElement :

const Authorization = ({ children }) => {
  const [disabled, setDisabled] = React.useState(false);

  const render = (errorMessage) => {
    return (
      <>{<ErrorPanel message={errorMessage} setDisabled={setDisabled} />}</>
    );
  };

  return (
    <>
      <PageLoader queryResult={apiQuery} renderPage={render} />
      {React.Children.map(children, (child) =>
        React.cloneElement(child, { disabled })
      )}
    </>
  );
};


// | 
// v
// It will inject `disabled` prop to every component's child:
<>
  <ErrorPanel
    disabled={disabled}
    message={errorMessage}
    setDisabled={setDisabled}
  />
  <MyChildComponent disabled={disabled} />
</>

Answer 2

You can make use of React.cloneElement to React.Children.map to pass on the disabled prop to the immediate children components

const Authorization: React.FC<Props> = (props) => {
    const [disabled, setDisabled] = React.useState(false);
    const render = (errorMessage : JSX.Element): JSX.Element => {
        return (
          <>
          {<ErrorPanel message={errorMessage} setDisabled={setDisabled}/>}
          </>
        );
      };

    return (
        <>
        <PageLoader
          queryResult={apiQuery}
          renderPage={render}
        />
        {React.Children.map(props.children, child => {
            return React.cloneElement(child, { disabled })
         })}
        </>
      );
};

UPDATE:

Since you wish to update the parent state to, you should store the state and parent and update it there itself, instead of storing the state in child component too.

export const Parent: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const createContent = (): JSX.Element => {
  return (
    <Authorization setDisabled={setDisabled}>
    {<ErrorPanel message={errorMessage} disabled={disabled} setDisabled={setDisabled}/>}
    <MyChildComponent disabled={disabled}/>
    </<Authorization>
  );
}

return (
   <Button onClick={onSubmit} disabled={disabled}>My Button</Button>
   {createContent()}
 );
};

const Authorization: React.FC<Props> = (props) => {
const render = (errorMessage : JSX.Element): JSX.Element => {
    return (
      <>
      {<ErrorPanel message={errorMessage} disabled={props.disabled} setDisabled={props.setDisabled}/>}
      </>
    );
  };

return (
    <>
    <PageLoader
      queryResult={apiQuery}
      renderPage={render}
    />
    {props.children}
    </>
  );
};