Why are there too many re-render in my program

Question

I am new to react. This errors occurs. Am I using too many useState()? I have been looking at the problems many times, I don't know what happen

The Error Message

-Uncaught Error: Too many re-renders. React limits the number of renders to prevent an 
 infinite loop.
 The above error occurred in the <App> component:
  at App (http://localhost:3000/static/js/bundle.js:261:82)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

My AddMember Component.AddMember.js.Am I using too many useState here

import React, { useState } from "react";
import "../src/css/AddMember.css";
const AddMember = (props) => {
  const [nameofmovie, setnameofmovie] = useState("");
  const [moviepic, setmoviepic] = useState("");
  const [leadActor, setleadActor] = useState("");
  const [rating, setRating] = useState("");
  
  function onChangeName(event) {
     setnameofmovie(event.target.value);
  }

  function onChangeImage(event) {
    setmoviepic(event.target.value);
  }

  function onChangeActor(event) {
    setleadActor(event.target.value.split(","));
  }

  function onChangeRating(event) {
    setRating(event.target.value);
  }
  const transferValue = (event) => {
    event.preventDefault();
    const val = {
      name: nameofmovie,
      "picture of image": moviepic,
      "lead actor": leadActor,
      rating: rating,
    };
    props.onSubmitHandler(val);
    clearState();
  };

  const clearState = () => {
    setnameofmovie("");
    setmoviepic("");
    setleadActor("");
    setRating("");
  };
  return (
    <div>
      <div id="topFormLayerOne">
        <form>
          <div id="secondFormLayerTwo">
            <label id="labelTwo">Please key in the Id</label>
            <input
              id="inputThree"
              type="text"
              maxLength="10"
              placeholder="Please key in the Id"
            ></input>
            <label id="labelFour">Movie Names</label>
            <input
              onChange={onChangeName}
              id="inputFour"
              type="text"
              maxLength="100"
              placeholder="Movies Names"
              name="moviesName"
            ></input>
            <label id="labelFive">Picture of Movies</label>
            <input
              onChange={onChangeImage}
              id="inputFive"
              type="file"
              maxLength="100"
              placeholder="Name of Images"
              name="imageName"
            ></input>
            <label id="labelSix">Lead Actor Names</label>
            <input
              onChange={onChangeActor}
              id="inputSix"
              type="text"
              maxLength="500"
              placeholder="Name of Actor"
              name="actorName"
            ></input>
            <label id="labelSeven">Rating</label>
            <input
              onChange={onChangeRating}
              id="inputSeven"
              type="text"
              maxLength="10"
              placeholder="Rating"
              name="movieRating"
            ></input>
            <button onClick={transferValue} id="submitButton">
              Submit
            </button>
            <button id="removeButton">Remove Movie</button>
          </div>
        </form>
      </div>
      
    </div>
  );
};

export default AddMember;

My Member Component.Member.js

import React from "react";

function Members({data}) {
  
  const tableRows = (data) => (data.map((info) => {  
    return(
      <tr key={info.id}>
        <td>{info.id}</td>
        <td>{info.name}</td>
        <td><img src={info["picture of image"]} alt=""></img><
        <td>
          {info["lead actor"]}
        </td>
        <td>{info.rating}</td>
      </tr>
    )
  }))

  return (
    <div>
      <table className="table table-stripped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Image</th>
            <th>Actors</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>{tableRows}</tbody>
      </table></div>
  );
}

export default Members;

My App Component.My App.js

import dataMovielist from '../src/data/data.json';
import Members from './Members';
import AddMember from './AddMember';
import {useState} from 'react';

function App() {
  
  const [datalist, setdatalist] = useState(dataMovielist);

  const onSubmitHandler = ((newHobbies)=>{
    setdatalist((oldHobbies)=>[newHobbies,...oldHobbies])
  })  

  return (
    
    <div className="App">
       <AddMember onSubmitHandler = {onSubmitHandler()} />
       <Members data={datalist} />   
    </div>
  );
}

export default App;

I don't know what happen. Can you help me solve it

Answer 1

I think it's this line: <AddMember onSubmitHandler = {onSubmitHandler()} /> You probably meant to write <AddMember onSubmitHandler={onSubmitHandler} /> The parentheses are causing the function to be invoked immediately as opposed to onSubmit. This is likely triggering a chain reaction.

Also, you want to change this line: <tbody>{tableRows}</tbody> to <tbody>{tableRows(data)}</tbody> to avoid "Functions are not valid a React child" error.