I’m encountering an issue with rendering tabs for student data in my React application that uses Firestore as the backend database. I have a Firestore collection named “STUDENTS” where each document represents a student’s information.

I’m trying to fetch this data and render it as tabs in my React component, but I’m facing difficulties in getting the tabs to display properly. Despite fetching the data from Firestore, the tabs aren’t rendering as expected, and I’m not receiving any error messages in the console.

/*Here’s an overview of what I’ve tried so far:

Fetching the student data from Firestore using React useEffect hook.
Mapping over the fetched data to generate tab components dynamically.
Ensuring that the Firestore security rules allow read access to the “STUDENTS” collection.
Despite these efforts, the tabs still aren’t displaying. I suspect there might be an issue with how I’m fetching or mapping over the Firestore data, but I’m unable to pinpoint the exact problem.

I would appreciate any insights, suggestions, or alternative approaches to resolve this issue and successfully render the student data as tabs in my React application. Thank you in advance for your help!*/

///////////////////////////////////////////////////////////////////////////////////////////////////

THIS IS MY TAB COMPONENT

///////////////////////////////////////////////////////////////////////////////////////////////////

  return (
    <div className="ryu">
      <div className='cock'><p>{student.personalData.firstName} {student.personalData.middleName} {student.personalData.lastName}</p></div>
      <div className='baba'><p>CLASS: {student.personalData.class}</p></div>
      <div className='none'>
        <button className='ooo' onClick=""><VisibilityIcon className='DID' /></button>
      </div>
    </div>
  );
};

export default Tab;

  const [openModal, setOpenModal] = useState(false);
  const [studentData, setStudentData] = useState([]);
  const [userId, setUserId] = useState(null);

  const handleOpenModal = () => {
    setOpenModal(true);
  };

  const handleCloseModal = () => {
    setOpenModal(false);
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        setUserId(user.uid);
      } else {
        setUserId(null);
      }
    });

    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (userId) {
      const fetchStudentData = async () => {
        try {
          const q = query(collection(db, "STUDENTS"), where("userId", '==', userId));
          const querySnapshot = await getDocs(q);
          const students = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
          console.log("Fetched student data:", students);
          setStudentData(students);
        } catch (error) {
          console.error('Error fetching student data:', error);
          alert("Oops! Something went wrong while fetching student data.");
        }
      };

      fetchStudentData();
    }
  }, [userId]);


  return (
    <div className='Sp'>
    <Sidebar />
    <div className='Sp-container'>
      <Navbar />
      <div className='Sp-child'>
        <button className='btn' onClick={handleOpenModal}>
          ADD STUDENT <AddBoxRoundedIcon />
        </button>
        {studentData.map((student, index) => (
            <Tab key={index} student={student} />
          ))}
      

        <BasicModal open={openModal} onClose={handleCloseModal}>
     
        </BasicModal>
      </div>
    </div>
  </div>
);
};    

export default Studentspage;```````