What attributes can React Fragment accept?

Brief Answer

React Fragment can accept only one attribute — key:

key — the only allowed attribute 🔑
<React.Fragment> — full syntax with attributes 📝
<>…</> — short syntax without attributes ⚡
Grouping — combining elements without DOM node 📦
Lists — key needed when rendering lists 📋

// With key attribute
<React.Fragment key={item.id}>
  <td>{item.name}</td>
  <td>{item.value}</td>
</React.Fragment>
 
// Short syntax (no attributes)
<>
  <h1>Title</h1>
  <p>Content</p>
</>

Full Answer

React Fragment is a special component for grouping elements without creating an additional DOM node! It accepts only one attribute — key. 🎯

1. Single attribute — key

Fragment can accept only the key attribute:

// ✅ Correct - only key
<React.Fragment key="unique-key">
  <h1>Header</h1>
  <p>Paragraph</p>
</React.Fragment>
 
// ❌ Wrong - other attributes not supported
<React.Fragment className="container" id="wrapper">
  <div>Content</div>
</React.Fragment>

2. Fragment syntax

Full syntax with attributes

import React from 'react';
 
function ComponentWithKey() {
  const items = [
    { id: 1, name: 'Item 1', value: 'Value 1' },
    { id: 2, name: 'Item 2', value: 'Value 2' }
  ];
 
  return (
    <table>
      <tbody>
        {items.map(item => (
          <React.Fragment key={item.id}>
            <tr>
              <td>{item.name}</td>
              <td>{item.value}</td>
            </tr>
            <tr>
              <td colSpan="2">Description for {item.name}</td>
            </tr>
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

Short syntax without attributes

function ShortSyntax() {
  return (
    <>
      <h1>Title</h1>
      <p>This is a paragraph</p>
      <button>Click me</button>
    </>
  );
}

3. When to use key

In lists and loops

function TableRows({ data }) {
  return (
    <table>
      <tbody>
        {data.map(item => (
          <React.Fragment key={item.id}>
            <tr>
              <td>{item.title}</td>
              <td>{item.status}</td>
            </tr>
            {item.showDetails && (
              <tr>
                <td colSpan="2">{item.details}</td>
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

Conditional rendering in lists

function ConditionalFragments({ items }) {
  return (
    <div>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <h3>{item.title}</h3>
          {item.hasSubtitle && <h4>{item.subtitle}</h4>}
          <p>{item.content}</p>
          {item.showDivider && <hr />}
        </React.Fragment>
      ))}
    </div>
  );
}

4. Practical examples

Grouping form fields

function FormFields({ showAdvanced }) {
  return (
    <form>
      <>
        <input type="text" placeholder="Name" />
        <input type="email" placeholder="Email" />
      </>
      
      {showAdvanced && (
        <>
          <input type="tel" placeholder="Phone" />
          <textarea placeholder="Comments" />
        </>
      )}
      
      <button type="submit">Submit</button>
    </form>
  );
}

Multiple elements in conditional rendering

function UserProfile({ user, isOwner }) {
  return (
    <div className="profile">
      <img src={user.avatar} alt="Avatar" />
      <h2>{user.name}</h2>
      
      {isOwner && (
        <>
          <button>Edit Profile</button>
          <button>Settings</button>
          <button>Logout</button>
        </>
      )}
    </div>
  );
}

Higher-order components

function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return (
        <>
          <div className="spinner" />
          <p>Loading...</p>
        </>
      );
    }
    
    return <WrappedComponent {...props} />;
  };
}

5. Syntax comparison

Syntax	Attributes	Usage
`<React.Fragment>`	Supports key	When key is needed
`<>...</>`	No support	Simple grouping

// When key is NOT needed - use short syntax
function SimpleGroup() {
  return (
    <>
      <h1>Header</h1>
      <p>Content</p>
    </>
  );
}
 
// When key is needed - use full syntax
function ListWithFragments({ items }) {
  return (
    <div>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </React.Fragment>
      ))}
    </div>
  );
}

6. Fragment alternatives

Regular div (creates DOM node)

// Creates additional div in DOM
function WithDiv() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
}
 
// Doesn't create additional node
function WithFragment() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

Array of elements (keys required)

// Array - each element needs key
function ArrayElements() {
  return [
    <h1 key="title">Title</h1>,
    <p key="content">Content</p>
  ];
}
 
// Fragment - no key needed
function FragmentElements() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

Best practices

Use short syntax when key is not needed 🎯
Use full syntax when key is needed 🔑
Prefer Fragment over unnecessary divs 📦
Group related elements logically 🧩

Common mistakes

❌ Wrong:

// Trying to add other attributes
<React.Fragment className="wrapper">
  <div>Content</div>
</React.Fragment>
 
// Using short syntax with key
<key={item.id}>
  <div>{item.name}</div>
</>

✅ Correct:

// Only key attribute
<React.Fragment key={item.id}>
  <div>{item.name}</div>
</React.Fragment>
 
// Short syntax without attributes
<>
  <div>Content</div>
</>

Conclusion

React Fragment attributes:

key — the only supported attribute
<React.Fragment> — for use with key
<>…</> — short syntax without attributes
Grouping — without creating DOM nodes

Use Fragment for clean markup! 🎯