🎓 React JS Example – Students, Courses, and Marks using Parent & Child Components

In React JS, we can divide our UI into multiple components and establish a clear communication between them using props. In this blog, we’ll build a basic structure where a Student is the parent, and the Course and Marks are child components.

📘 What You Will Learn

• How to pass data from Parent to Child using props
• How to use arrays and map through them
• How to break UI into reusable components

🧩 Component Structure

src/
├── components/
│   ├── Student.jsx        # Parent component
│   ├── CourseList.jsx     # Child: Displays course and marks
│   └── CourseItem.jsx     # Child: Single course item
├── App.jsx
  

🧑‍🎓 Parent Component: Student.jsx

import React from 'react';
import CourseList from './CourseList';

const Student = () => {
  const studentData = {
    name: "Anjum Khan",
    courses: [
      { title: "Mathematics", marks: 92 },
      { title: "Physics", marks: 85 },
      { title: "Computer Science", marks: 98 }
    ]
  };

  return (
    <div>
      <h2>Student Name: {studentData.name}</h2>
      <CourseList courses={studentData.courses} />
    </div>
  );
};

export default Student;
  

📚 Child Component: CourseList.jsx

import React from 'react';
import CourseItem from './CourseItem';

const CourseList = ({ courses }) => {
  return (
    <div>
      <h3>Courses & Marks:</h3>
      <ul>
        {courses.map((course, index) => (
          <CourseItem key={index} title={course.title} marks={course.marks} />
        ))}
      </ul>
    </div>
  );
};

export default CourseList;
  

📄 Child Component: CourseItem.jsx

import React from 'react';

const CourseItem = ({ title, marks }) => {
  return (
    <li>
      <strong>{title}</strong> – Marks: {marks}
    </li>
  );
};

export default CourseItem;
  

🔧 App.jsx – Using the Student Component

import React from 'react';
import Student from './components/Student';

function App() {
  return (
    <div className="App">
      <h1>React Student Dashboard</h1>
      <Student />
    </div>
  );
}

export default App;
  

📈 Output Example

When you run this app, it will display:

• Student Name: Anjum Khan
• Courses & Marks:
  • Mathematics – Marks: 92
  • Physics – Marks: 85
  • Computer Science – Marks: 98

💡 Key Concepts Covered

• Props: Used to pass data from parent to child
• Reusable components: CourseItem can be reused across different students
• Array.map(): Render a list of components dynamically

📌 Final Thoughts

This example helps beginners understand how React components work together. As you progress, you can enhance this by adding forms to input marks, managing state with useState, and storing data using useContext or external APIs.

Up next: “How to Handle Events and useState in React”