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`.