Question 239405 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop." I tried the proposed solution but it still wont work

I have tried the same fix "add this to the onchange function (()=>)" I found in this site but it still wont work, can someone help me? I have been stuck on this error for days now.
I’m still a beginner in using React, thank you in advance

I came across this error in the console. I had a look through the previous questions but they were not much help. Anyone know how I have caused this infinite loop?

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

this is the error message

import React, { useState } from 'react'
import {logo} from "../assets/index";
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import {Link} from "react-router-dom";

const Registration = () => {
    const [userName, setUserName]=useState("");
    const [email, setEmail]=useState("");
    const [password, setPassword]=useState("");
    const [cPassword, setCPassword]=useState("");

    return 
    <input 
         onChange={() => handleName} 
         value={userName} 
         type='text' 
         className='w-full py-1 border border-zinc-400 px-2 text-base rounded-sm outline-none focus-within:border-farmlink_yellow focus-within:shadow-farmlinkInput duration-100' 
     />

edit: this is what i have tried after reading your comments

import React, { useState } from 'react'
import {logo} from "../assets/index";
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import {Link} from "react-router-dom";

const Registration = () => {
    const [userName, setUserName]=useState("");
    const [email, setEmail]=useState("");
    const [password, setPassword]=useState("");
    const [cPassword, setCPassword]=useState("");

    const handleName=(e)=>{
    setUserName(e.target.value)
    console.log("user", userName);
    setErrUserName("");
    };

    return 
    <input 
         onChange={handleName} 
         value={userName} 
         type='text' 
         className='w-full py-1 border border-zinc-400 px-2 text-base rounded-sm outline-none focus-within:border-farmlink_yellow focus-within:shadow-farmlinkInput duration-100' 
     />{
    errUserName && (
    <p className='text-red-600 text-xs font-semibold tracking-wide flex 
    items-center gap-2 -mt-1.5'> <span className='italic font-titleFont 
    font-extrabold text-base'>!</span>{errUserName}</p>
    )
    }

I have to add that the problem only occurred after I made the registration.js file and proceeded to add lines to try to recreate Amazon

here is a copy of my whole project for reference: "the error occurs when i click on the Login/Support"

https://codesandbox.io/s/modest-oskar-5zy259?file=/src/index.js

Tags:

2

Answers


  1. 0 
    import "./styles.css";
import { useState } from "react";

export default function App() {
  const [userName, setUserName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [cPassword, setCPassword] = useState("");

  const handleName = (e) => {
    setUserName(e.target.value);

    console.log("user", userName);
  };
  return <input onChange={handleName} value={userName} type="text" />;
}
    Login or Signup to reply.
  2. 0

    The issue in the code was, that a setState was occurring outside of any function. A simple scope issue. So any re-render caused the setState to happen again, which in turn caused another re-render. I believe it to be a simple typo.

    codesandbox.io/s/young-frost-7z2zj5?file=/src/pages/Signin.js

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search