Blog>
Snippets

Passing Props through Fragments

Illustrate passing data through a Fragment to child components without creating intermediate elements.
import React, { Fragment } from 'react';

// Child Component which will receive props
function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

// Parent Component using Fragments to pass props to children
function ParentComponent(props) {
  return (
    <Fragment>
      {/* Passing props through fragments to the child component */}
      <ChildComponent name='John' age={30} />
      <ChildComponent name='Jane' age={25} />
    </Fragment>
  );
}

// The App component which renders the Parent component
function App() {
  return (
    <div>
      <ParentComponent />
    </div>
  );
}

export default App;
This example defines a `ChildComponent` which takes `name` and `age` as props. The `ParentComponent` uses a `Fragment` to pass these props to multiple `ChildComponent` instances without adding extra DOM elements. `App` renders the `ParentComponent`.