Passing multiple children as props

Question

Question:

Is there a better way of handling multiple children prop passing as suggested by my solution below?

Some other pattern / concept that I could use?

Context:

I have a HeaderComponent:

export const HeaderComponent: React.FC<HeaderComponentProps> = ({

    leftComponent,
    centerComponent,
    rightComponent,

}: HeaderComponentProps): ReactElement => (

    <div className={styles.header}>
        <div>{leftComponent}</div>
        <div>{centerComponent}</div>
        <div>{rightComponent}</div>
    </div>

)

I am using it in several modals, e.g. like so:

export const ChangeColorModal: React.FC = (): ReactElement => {
...
    // this part will be different in every modal
    const leftComponent = (
        <Link to={`/spread/${params.spreadId}`} replace={true}>
            <ButtonComponent buttonType={ButtonType.MODAL} onClick={handleCancel}>
                <Icon name={IconName.CROSS} fill={iconStyles.iconDark} />
            </ButtonComponent>
        </Link>
    )

    // this part will be different in every modal
    const centerComponent = <HeaderTitle text={locale.colorChange.title} />;

    // this part will be different in every modal
    const rightComponent = (
        <Link to={`/spread/${params.spreadId}`} replace={true}>
            <HeaderDoneButton onClick={handleSave} />
        </Link>
    )

    return (
     ...
        <div className={styles.wrapper}>
            <HeaderComponent
                leftComponent={leftComponent}
                centerComponent={centerComponent}
                rightComponent={rightComponent}
            />
            <ColorListComponent />
        </div>
     ...
    )
}

HeaderComponent should work with two or three props (e.g. it should be flexible enough to still work with just leftComponent & centerComponent.

Problem:

Since I am using HeaderComponent multiple times, it feels like to me there must a way to make HeaderComponent more smart and write less code.

Answer 1

I think you can use it as normal children

export const HeaderComponent: React.FC<HeaderComponentProps> = ({
children

}: HeaderComponentProps): ReactElement => (

    <div className={styles.header}>
        children
    </div>
)

export const HeaderItemComponent: React.FC<HeaderItemComponentProps> = ({
children
}: HeaderItemComponentProps): ReactElement => (
    <div className={styles.item}>
        children
    </div>
)

and in your component

export const ChangeColorModal: React.FC = (): ReactElement => {
...
    // this part will be different in every modal
    const leftComponent = (
        <Link to={`/spread/${params.spreadId}`} replace={true}>
            <ButtonComponent buttonType={ButtonType.MODAL} onClick={handleCancel}>
                <Icon name={IconName.CROSS} fill={iconStyles.iconDark} />
            </ButtonComponent>
        </Link>
    )

    // this part will be different in every modal
    const centerComponent = <HeaderTitle text={locale.colorChange.title} />;

    // this part will be different in every modal
    const rightComponent = (
        <Link to={`/spread/${params.spreadId}`} replace={true}>
            <HeaderDoneButton onClick={handleSave} />
        </Link>
    )

    return (
     ...
        <div className={styles.wrapper}>
            <HeaderComponent>
              <HeaderItemComponent>{leftComponent}</HeaderItemComponent>
              <HeaderItemComponent>{centerComponent}</HeaderItemComponent>
              <HeaderItemComponent>{rightComponent}</HeaderItemComponent>
            </HeaderComponent>
            <ColorListComponent />
        </div>
     ...
    )
}

By this way you'll can add as many elements to your header as you want) Also you'll have more control under your component and can change behaviour of HeaderItem. In addition you have no other choices) Because if you want to pass different children with different styles you can use some render methods or pass components. But in the end you'll write the same amount of code and code base will be harder to understand)