React App: Student Details by ID

 const students = {

  '101': { name: 'Alice', class: '10A', marks: 85, status: 'Pass' },

  '102': { name: 'Bob', class: '10B', marks: 55, status: 'Pass' },

  '103': { name: 'Charlie', class: '10C', marks: 32, status: 'Fail' },

};

function StudentApp() {

  const [id, setId] = useState('');

  const [student, setStudent] = useState(null);

  const fetchStudent = () => {

    setStudent(students[id]);

  };

  return (

    <div>

      <h1>Student Info</h1>

      <input value={id} onChange={(e) => setId(e.target.value)} placeholder="Enter Student ID" />

      <button onClick={fetchStudent}>Get Info</button>

      {student ? (

        <div>

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

          <p>Class: {student.class}</p>

          <p>Marks: {student.marks}</p>

          <p>Status: {student.status}</p>

        </div>

      ) : id && <p>No student found.</p>}

    </div>

  );

}