Functional Components and Props

1. Functional Components in Modern React

In modern React, components are written as standard JavaScript functions that accept an object of inputs (called props) and return JSX describing what should appear on the screen.

// Simple functional component
function WelcomeMessage() {
  return 
Welcome to the CBT Student Dashboard!
;
}

export default WelcomeMessage;

2. What are Props?

Props (short for properties) are the mechanism for passing data and configuration from a parent component down to a child component. Props establish a predictable unidirectional data flow (top-to-bottom).

Passing and Reading Props:

// Parent Component
function ExamDashboard() {
  return (
    

      
      
    
  );
}

// Child Component with Props Destructuring
function CourseCard({ title, questions, duration, isLive }) {
  return (
    

      
{title}
      
Total Questions: {questions}
      
Duration: {duration}
      
        {isLive ? "Live Now" : "Scheduled"}
      
    
  );
}

3. Default Prop Values

You can provide fallback default values during parameter destructuring:

function Button({ label, variant = "primary", disabled = false }) {
  return (
    
      {label}
    
  );
}

4. The Special children Prop

When you wrap elements or other components between the opening and closing tags of a component, React passes them automatically under the children prop. This enables flexible wrapper/layout containers:

function ModalWrapper({ title, children }) {
  return (
    

      

        
{title}
        
{children}
      
    
  );
}

// Usage:
function TestSubmissionModal() {
  return (
    
      
Are you sure you want to finish the exam? You have 5 unattempted questions.
      Yes, Submit
    
  );
}

5. Golden Rule: Props are Read-Only (Immutable)

A component must never modify its own props. Pure functions never mutate the arguments passed to them.