How to Add Key to React Fragment

programming frontend react

Problem

We normally use the below syntax for a React Fragment. But we unable to add key to the React Fragment with such syntax

<>
    <AdditionalSectionForm />
    <StrippedDivider className="my-10" />
</>

Use React.Fragment to wrap the children

We can use React.Fragment to wrap the children and add the key to it.

import { Fragment } from "react";

{additionalSections.map((section, index) => (
    <Fragment key={`additional-section-${index}`}>
        <AdditionalSectionForm />
        <StrippedDivider className="my-10" />
    </Fragment>
))}