too many re-renders. react limits the number of renders to prevent an infinite loop even when the fu-CodePudding

import React, { useState } from "react";
import { Link } from "react-router-dom";

const Form = (props) => {
  const [submit, setSubmit] = useState(false);

  const [inputData, setInputData] = useState({
    firstname: "",
    location: ""
  });

  
  const InputHandle = async (event) => {
    setInputData({ ...inputData, [event.target.name]: event.target.value });
  };
return (
    <div>
      <form id="form" method="GET">
        <div className="inputs">
          <label for="firstname"> First Name</label>
          <input
            type="text"
            id="firstname"
            name="firstname"
            onChange={InputHandle}
          ></input>
        </div>
<div className="inputs">
          <label for="location">User accessing application from</label>
          <input
            type="text"
            id="location"
            name="location"
            onChange={InputHandle}
          ></input>
          <Link to="/dashboard">
            <button
              type="submit"
              className="btn"
              onClick={() => {
                props.getData(inputData);
              }}
            >
              Submit
            </button>
          </Link>
        </div>
      </form>
    </div>

App.js

import Dashboard from "./components/Dashboard";
import Form from "./components/Form";

import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Routes,
  Route,
  Link,
} from "react-router-dom";
import { useState } from "react";

function App() {
  const [data, setData] = useState({});

  const getData = (inputData) => {
    setData(inputData);
  };

  return (
    <Router>
      <div className="App">
        <Routes>
          <Route exact path="/" element={<Form getdata={getData()} />}></Route>
          <Route
            exact path="/dashboard" element={<Dashboard data={data} />}
          ></Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

I am getting this error "too many re-renders. react limits the number of renders to prevent an infinite loop." I don't know what exactly I am doing wrong here, could anyone please help. To help you understand: I have created a form where I want to take the input(name and location) from the user and show that input on a different page. I tried to integrate googleMaps API to show the location as per the input and m entire code crashed, otherwise it was working fine earlier, also if anyone could help me with the map here too? I have been banging my head trying to do it. I can display the map on a different page but I want to display the location on the map when the user writes any location in the input field of the form, hope I make sense.

CodePudding user response：

It looks like this line is going to call getData() every time it's rendered, and then pass undefined as the prop value:

<Route exact path="/" element={<Form getdata={getData()} />}></Route>

getData calls a state setter, which seems likely to cause an infinite loop.

I believe it should instead use:

getdata={getData}

CodePudding user response：

It's 2 part problem. First problem was answered by @JLRishe. The second problem is that your form prop is called getdata instead of getData and thus the function does not exists and form is not functioning.

This is your final code

<Route exact path="/" element={<Form getData={getData} />}></Route>

The reason to why this you were stuck in loop is, that giving form props as getData={getData()} you are sending a result of that function as a prop and not the function. And that function calculates on every render, which causes another render.

Stripped down Codepen here