Too many re-renders. React limits the number of renders to prevent an infinite loop. UI and conole error

You are executing the setCount function on render, which causes a rerender which results in an infinity loop:

const makeCount = { add: setCount(count + 1), discount:setCount(count - 1) } 

This object actually call the setCount function instead of creating an fucntion to be called.

You need to change it to:

const makeCount = { add: () => setCount(count + 1), discount: () => setCount(count - 1) } 

This will generate new functions called add and discount instead of calling setCount.

App.js

import React ,{useState} from 'react'; import { Child } from './Components/Child'; function App() { let value = [1,2,4,6]; const number = (number,val)=>{ console.log(`${number}: value ${val}`) } return ( <div className="App"> { value.map((item , i)=>{ return <Child count = {item} itemName={i} key={i} muFunc={number}/> }) } </div> ); } 

export default App;

Child.js

import React,{useState,useEffect} from 'react'; export function Child ({count,itemName,muFunc}) { const [number, setnumber] = useState(count); useEffect(() => { muFunc(itemName,number); }, [number]); const makeCount = { add: () => setnumber(number + 1), discount: () => setnumber(number - 1) } // Send this number to parent ?? return( <> <h3>{itemName}</h3> <button onClick ={makeCount.discount}>decrement</button> <input value={number} onChange={(e)=>setnumber(e.target.value)} /> <button onClick ={makeCount.add}>Increment</button> <br/> </> ) }