Evaluation 3

REACT JS (Evaluation 3)

Main.jsx :

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

  <StrictMode>

    <App />

  </StrictMode>,

)

App.jsx :

import React, { useState } from "react";

import StudentList from "./components/StudentList";

import "./App.css";

function App() {

  const initialStudents = [

    { id: 1, name: "Vijeth", grade: 85 },

    { id: 2, name: "Komal", grade: 90 },

    { id: 3, name: "Vinuta", grade: 78 },

    { id: 4, name: "Vinuth", grade: 92 },

  ];

  const [students, setStudents] = useState(initialStudents);

  return (

    <div className="app">

      <h1>Student Grades Tracker</h1>

      <StudentList students={students} setStudents={setStudents} />

    </div>

  );

}

export default App;

Student.jsx : 

import React, { useState, useEffect } from "react";

import "./Student.css";

function Student({ student, students, setStudents }) {

  const [grade, setGrade] = useState(student.grade);

  const [average, setAverage] = useState(0);

  useEffect(() => {

    const total = students.reduce((sum, student) => sum + student.grade, 0);

    const avg = (total / students.length).toFixed(2);

    setAverage(avg);

  }, [students]);

  const handleGradeChange = (e) => {

    const newGrade = Number(e.target.value);

    setGrade(newGrade);

    const updatedStudents = students.map((s) =>

      s.id === student.id ? { ...s, grade: newGrade } : s

    );

    setStudents(updatedStudents);

  };

  return (

    <div className="student">

      <div className="student-info">

        <p>Name: {student.name}</p>

        <input

          type="number"

          value={grade}

          onChange={handleGradeChange}

          className="grade-input"

        />

      </div>

      <p>Class Average: {average}</p>

    </div>

  );

}

export default Student;

StudentList.jsx : 

import React from "react";

import Student from "./Student";

import "./StudentList.css";

function StudentList({ students, setStudents }) {

  return (

    <div className="student-list">

      {students.map((student) => (

        <Student

          key={student.id}

          student={student}

          students={students}

          setStudents={setStudents}

        />

      ))}

    </div>

  );

}

export default StudentList;