How do I fix "Invalid prop `style` supplied to `React.Fragment`"?

This warning can be confusing to track down, because the component it points to may be one you didn’t write. The full message looks something like this:

Warning: Invalid prop `style` supplied to `React.Fragment`.
React.Fragment can only have `key` and `children` props.

The prop name changes (style, onStartShouldSetResponder, data-headlessui-state), but the cause is the same.

Why it happens

A Fragment (<>...</> or <Fragment>) groups elements without adding anything to the layout, so it has nowhere to put a style or an event handler. React only allows key and children on it.

If you didn’t pass those props yourself, look for a component that takes its child and adds props to it, which is how pressables, tooltips, animation wrappers, and asChild patterns work. If that child is a component that returns a Fragment, the added props land on the Fragment. The same thing happens with Headless UI when you use as={Fragment} and its child can’t take the props.

How to fix it

1. Find the component. The warning includes a component stack, so look for the first component in it that you wrote and check what it returns.

2. If it returns a Fragment, return a real element instead, and pass the incoming props through:

   // Before: the wrapper's style lands on the Fragment
   function Card({ children }) {
     return <>{children}</>;
   }
   
   // After
   function Card({ children, style, ...rest }) {
     return (
       <View style={style} {...rest}>
         {children}
       </View>
     );
   }

   On the web, use a div or span instead of View.

3. With Headless UI and as={Fragment}, make sure the single child is an element that accepts props, like a div or a component that forwards them, or remove as={Fragment} and let the library render its own element.

4. If you did pass the prop yourself, move it to an element inside the Fragment.

How you know it’s fixed

When you reload the screen and trigger the same interaction, the warning no longer appears in the console. The style or press behavior you expected now works too, since it was being dropped before.

If it keeps appearing

Search your code for <> and Fragment near the component named in the stack, and check any component you pass as a child to a library wrapper. A wrapper that expects exactly one element child will also misbehave if you pass it a list or plain text.