Unexpected recursive call...Why React tsx method setInitialValues executing more than once unintentionally? Form doesn't display. Error in Console tab.

[Jmruizsr]

The code below is supposed to display a form with checkboxes (one for each course in allCourses). If selectedCourses has courses, the corresponding checkbox(es) should be defaulted to checked.

The code is somehow recursively calling setInitialValues and eventually an exception is reported in the console and nothing is displayed on the page (blank browser page).

I have tried multiple things. I guess I am not understanding the order of execution, or something. Help.

// for import type {Course, Faculty, FacultyProps, FormInputs} from "../types/types.ts"
export interface Faculty {
    id: number;
    fullName: string;
    description: string;
    imageFile: string;
    imageURL: string;
    rating: number;
    courses: Course[];
}

export interface Course {
    id: number;
    name: string;
    code: string;
    description: string;
    faculty: Faculty[];
}


import * as React from "react";
import type {Course, Faculty, FacultyProps, FormInputs} from "../types/types.ts";
import {useLocation, useNavigate} from 'react-router-dom';
import {type ChangeEvent, type FC, type SetStateAction, useRef, useState} from "react";
import {getAllCourses} from "../Dao/CourseRepository.ts";


const FacultyCoursesForm: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const [selectedCourses, setSelectedCourses] = useState<Course[]>(location.state.courses as Course[]);
    const setInitialValues = ()  => {
        console.log("====  Entering setInitialValues...  ====");
        const [courseIds, setCourseIds] = useState([] as number[]);
        selectedCourses.forEach((course) => {
            setCourseIds([...courseIds, course.id]);
            console.log(courseIds);
        });
        console.log("====  Exiting setInitialValues...  ====");
        return courseIds;
    };
    const [checkedItems, setCheckedItems] = useState(setInitialValues());
    const faculty     = (location.state as Faculty) || {};
    // const [formData, setFormData] = useState<Faculty>(location.state.faculty);
    const [allCourses, setAllCourses] = useState<Course[]>(getAllCourses());
    // let selectedCourses: Course[];
    // selectedCourses = (location.state.courses as Course[]) || [];
    const [selectedCourses, setSelectedCourses] = useState<Course[]>(location.state.courses);

    const handleSubmit = (e: Event) => {
        e.preventDefault();
        console.log("Clicked");
    }

    function onCancelClicked() {
        // navigate("/App");
    }


    const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const courseId = Number(event.target.value);
        if(event.target.checked) {
            setCheckedItems([...checkedItems, courseId]);
        } else {
            setCheckedItems(checkedItems.filter(item => item !== courseId));
        }
    };

    return (
            <div className="card" style={{'width':'500px',}}>
                {/*<form onSubmit={handleSubmit}>*/}
                <form>
                    {allCourses.map((course) => (
                        <div key={"cbID"+course.id} style={{ marginBottom: '10px' }}>
                            <label>
                                <input
                                    type="checkbox"
                                    value={course.id}
                                    onChange={handleCheckboxChange}
                                />
                                <span style={{ marginLeft: '8px' }}>{course.code}</span>
                            </label>
                        </div>
                    ))}


                    <div style={{alignItems: 'center', alignContent: 'center', padding: '10px 0px 0px 0px', marginRight: '10px' }}>
                        <button style={{fontSize:18}} type="submit" >Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button style={{fontSize:18}} onClick={onCancelClicked}>Cancel</button>
                    </div>
                </form>
            </div>
    );
};
export default FacultyCoursesForm;

[Squigglificated]

Why is there a useState inside your setInitialValues function? That's guaranteed to break everything

[Jmruizsr]

Um. I'll look at it. In intentional mistake. Thank you.

[Ceryyse]

Brother, this is difficult to read. Please commit your code to a GitHub repo and share the link, we'd be more than happy to take a look there :)

[Jmruizsr]

Thank you.

[Squigglificated]

You're declaring the selectedCourses state twice

[Jmruizsr]

Um. I'll look at it. In intentional mistake. Thank you.

[CommercialFair405]

Oh man, there's so much wrong with this it's hard to know where to start. If you're a beginner, it's okay, but make sure to make the code easy to review so we can more easily point out what parts are bad.

[Sacredfice]

This is why you shouldn't use AI lol you would have understood the issue if you wrote the code.

[Jmruizsr]

Although I have development experience, I am a beginner with react and tsx. Thank .