React js :- Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

Q. i want to setstate of every answer map an arrray.
please hep me out.
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

 const CreateQuestion = () => { const { id } = useParams(); const [quesindex, setQuesIndex] = useState(0); const [answer, setAnswer] = useState(); const [selected, setSelected] = useState(""); const [error, setError] = useState(""); const authContext = useContext(AuthContext); const [QuestionData, setQuestionData] = useState([]); useEffect( function () { getTestSeries(); }, [id] ); const getTestSeries = async () => { try { const token = authContext.token; const response = await Api.get(`/user/getallquestions/${id}`, { headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, }); if (response.status === 200) { setQuestionData(response.data["getAllQuestions"]); } else { toast(response.data.message); } } catch (error) { toast(error.message); } }; const handleSubmit = () => {}; return ( <> <h1 className="mx-auto flex justify-center my-3 text-5xl font-bold"> Test Series </h1> <div> {QuestionData.length > 0 && QuestionData.map(function (ObjectData, index) { const { questiontext, questionImgURL, options, answers, description, } = ObjectData; ``` while setAnswer state on every loop ``` setAnswer(answer); return ( <> <div key={index} className="my-2 mx-5 md:col-span-2"> <div className="shadow px-10 py-2 bg-purple-100 sm:rounded-md sm:overflow-hidden"> <div className=" w-full space-y-6"> <div className="grid grid-cols-3 gap-6"> <div className="col-span-3 sm:col-span-2"> <h1 className=" flex text-lg font-medium space-x-1 text-gray-700"> <span className="font-semibold text-lg"> {index + 1}. </span> {questiontext} </h1> </div> {questionImgURL === ""? ( <div /> ): ( <div className="col-span-3 sm:col-span-2"> <img alt="question img" className="max-w-full object-cover max-h-40 border-2 border-red-500" src={`https://api.microstudy.org/${questionImgURL}`} ></img> </div> )} </div> <div className="mt-4 space-y-2"> {options.length > 0 && options.map((options, index) => { const { id, optiontext } = options; return ( <div className="flex items-center justify-start " key={index} > <input id={optiontext} name="options" type="radio" value={id} onChange={changehandler} className="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-800" /> <label htmlFor={optiontext} className="ml-3 block text-base font-medium text-gray-900" > {optiontext} </label> </div> ); })} </div> </div> </div> </div> </> ); })} <div className=" text-center my-3"> <button type="submit" onClick={handleSubmit} className="inline-flex justify-center py-2 px-8 border border-transparent shadow-md text-lg font-semibold rounded-md text-gray-900 bg-purple-400 hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" > Submit </button> </div> </div> </> ); };

please Ignore  below text

Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that y ou have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you ha ve not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).

Answer 1

Explanation

The error lies in the onClick prop of your button. In your current implementation, handleSubmit is being called in every render loop. To fix this, we can wrap the handleSubmit function in an arrow function, ensuring that it will only called if the button is being clicked.

Your code

 <button type="submit" onClick={handleSubmit} className="inline-flex justify-center py-2 px-8 border border-transparent shadow-md text-lg font-semibold rounded-md text-gray-900 bg-purple-400 hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" >

Fix

 <button type="submit" onClick={() => handleSubmit} className="inline-flex justify-center py-2 px-8 border border-transparent shadow-md text-lg font-semibold rounded-md text-gray-900 bg-purple-400 hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" >