BIS601 FSD - Passing props as Children in React

 Passing props as Children

In React, props.children allows you to pass nested JSX (child elements) into a component. This is great for wrapping content or creating layout components.

Using props.children

We’ll create a Card component that wraps whatever content you place inside it.

import React from 'react';

function Card(props) {

  return (

    <div style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px' }}>

      {props.children}

    </div>

  );

}

export default Card;

App.jsx

import React from 'react';

import Card from './Card';

function App() {

  return (

    <div style={{ padding: '2rem' }}>

      <h1>Using props.children</h1>

      

      <Card>

        <h2>This is inside the Card</h2>

        <p>Card content is passed as children.</p>

      </Card>

      

      <Card>

        <button>Click Me</button>

      </Card>

    </div>

  );

}

export default App;