Academics- Computer Science

Tuesday, May 13, 2025

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 (

{props.children}

</div>

);

}

export default Card;

App.jsx

import React from 'react';

import Card from './Card';

function App() {

return (

<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;

BIS601 FSD - What are props and why should we use them?

What Are Props?

Props are read-only.
Props allow you to customize child components.
You pass props like HTML attributes, and access them inside the child component using props.name, props.title, etc.

Why Use Props?

To reuse components with different data without rewriting them.

Greeting.jsx

import React from 'react';

function Greeting(props) {

return <h2>Hello, {props.name}!</h2>;

}

export default Greeting;

App.jsx

import React from 'react';

import Greeting from './Greeting';

function App() {

return (

<div>

<h1>Props Example</h1>

</div>

);

}

export default App;

Output:

Props Example

Hello, Alice!

Hello, Bob!

Key Notes:

Props are passed like attributes: <Greeting name="Alice" />
Props are received as an object inside the function: props.name

Props make components dynamic and reusable

BIS601 FSD - Why should we Compose Components as much as possible?

Why Compose Components?

Instead of writing everything in one file or component, you break down UI into logical, small components and compose them together like building blocks.

We’ll build:

A Greeting component
A Counter component
Compose both in a parent App component

Greeting.jsx

import React from 'react';

function Greeting(props) {

return <h2>Hello, {props.name}!</h2>;

}

export default Greeting;

Counter.jsx

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>Increment</button>

</div>

);

}

export default Counter;

App.jsx

import React from 'react';

import Greeting from './Greeting';

import Counter from './Counter';

function App() {

return (

<h1>Component Composition Example</h1>

</div>

);

}

export default App;

Summary

Each component does one thing well
App composes them to form the full UI
Props (like name) help in customizing reused components

BIS601 - FSD - React Application to Increment and Decrement a counter using Functional Components

React application using functional components:

import React, { useState } from 'react';

function App() {

const [count, setCount] = useState(0);

const handleIncrement = () => setCount(count + 1);

const handleDecrement = () => setCount(count - 1);

return (

<h1>Functional Counter</h1>

<h2>{count}</h2>

<button onClick={handleIncrement}>Count Up</button>

Count Down

</button>

</div>

);

}

export default App;

BIS601 - FSD - React Application to Increment and Decrement a counter using Buttons

Below is a simple React application written using React Class Components. It includes:

A class component named App
A counter value in state
Two buttons to increment and decrement the counter

import React, { Component } from 'react';

class App extends Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

}

handleIncrement = () => {

this.setState({ count: this.state.count + 1 });

}

handleDecrement = () => {

this.setState({ count: this.state.count - 1 });

}

render() {

return (

<h1>Class-based Counter</h1>

<h2>{this.state.count}</h2>

<button onClick={this.handleIncrement}>Count Up</button>

Count Down

</button>

</div>

);

}

export default App;

Creating the application and running it as usual.

BIS601 FSD - Difference between Functional and Class Components in ReactJS

Here's a clear comparison between Class Components and Functional Components in React:

Class vs Functional Components

Feature	Class Component	Functional Component
Syntax	Uses class keyword	Uses plain JS functions or arrow functions
State Management	Uses this.state and this.setState()	Uses useState() hook
Lifecycle Methods	Uses methods like componentDidMount()	Uses useEffect() hook
this keyword	Required (this.state, this.props)	Not required
Hooks support	❌ Not directly supported	✅ Fully supports hooks
Boilerplate code	More verbose	More concise
Performance	Slightly heavier due to binding	Slightly better due to cleaner function closures
Readability	Less readable for beginners	Easier to read and write

When to Use Which

Situation	Recommendation
Writing new React code (modern projects)	✅ Functional
Need to use Hooks (useState, useEffect)	✅ Functional
Maintaining legacy React app	✅ May require Class
Learning lifecycle methods explicitly	🟡 Either, but class for classic syntax

Which Should Be Preferred?

Functional Components are preferred in modern React:

React team recommends hooks
Cleaner, shorter syntax
Better performance patterns
Easier to test and reuse logic