Function Component

This document explores how React function components use props to pass data, set default values, and handle events. It covers the principles of reusability, unidirectional data flow, customization, and composition, as well as practical event handling and conditional rendering techniques.

Working with Function Components – Props and Event Handling

Function components in React use properties, known as props, to pass data from parent to child components. Props are similar to objects and store the attributes of a component. They are immutable, meaning their values cannot be changed by the child component.

Example: Basic Function Component

1function Welcome() {
2  return <h1>Hello, World!</h1>
3}

Passing Data with Props

Props allow data to flow from a parent to a child component. For example, the App component can pass a name attribute to an EmployeeData child component. Inside the child, the props object is accessed using dot notation (e.g., props.name).

1function EmployeeData(props) {
2  return <h1>Employee Name: {props.name}</h1>
3}
4
5function App() {
6  return <EmployeeData name="John" />
7}

Props can be passed as static values or dynamically using curly braces. For instance, a parent can define a variable and pass it as a prop, or assign a static value directly in the JSX.

Default Props

Default props provide fallback values for a component if the parent does not supply them. These are defined in the child component and ensure consistent rendering even when some props are missing.

1function Department({ deptName = "Human Resources" }) {
2  return <div>Department: {deptName}</div>;
3}
4
5// Usage
6<Department /> // Renders: Department: Human Resources
7<Department deptName="Engineering" /> // Renders: Department: Engineering

Principles of Props and Function Components

• Reusability: Components can be reused with different props, reducing code duplication.
• Customization: Props allow components to adapt their behavior and appearance based on the data provided.
• Unidirectional Data Flow: Data always flows from parent to child, making the application predictable and easier to debug.
• Composition: Props enable the building of complex UIs by composing simpler components.

Event Handling and State in Function Components

React’s useState hook manages state within function components. State variables can control UI behavior, such as showing or hiding elements. Event handlers, like onClick, update state and trigger UI updates.

Example: Event Handling and useState

 1import { useState } from 'react'
 2
 3function SalaryIncrease({ increase }) {
 4  const [showIncrease, setShowIncrease] = useState(false)
 5
 6  return (
 7    <div>
 8      <button onClick={() => setShowIncrease(true)}>
 9        Display Annual Salary Increase
10      </button>
11      {showIncrease && <div>Increase: {increase}</div>}
12    </div>
13  )
14}

For example, a button click can set a boolean state variable to true, causing the component to conditionally render additional information. Conditional rendering is often implemented using logical expressions (e.g., &&).

Function Components with Arrays

Conclusion

React function components use props for data flow and customization, and state for managing dynamic UI behavior. By following best practices—such as not mutating props or state directly and using event handlers to update state—developers can create robust, reusable, and maintainable components.

FAQ