Tengo un componente de página de inicio en react.js. Este componente obtiene accesorios del componente de la aplicación (uno de ellos es el nombre de usuario). Cuando el usuario ingresa su nombre en esta página, la variable de user actualiza su valor y, en consecuencia, la función setusername llama a setUserName en el componente de la aplicación. Obtengo demasiados errores de renderización en el siguiente código:

Componente de la página de inicio:

 import React from 'react' import './homepage.css' import {useState,useEffect} from 'react' const Homepage = (props) => { const [user,setUser]=useState(""); function setUserName() { const {username,setusername}=props; setusername(user); } return ( <div> <div className="panel"> <div className="pricing-plan"> <img src="../images/girly.gif" className="logo" alt=""/> <ul className="pricing-features"> <h1 className="greetname">Hi, I'm Sam</h1> <li className="pricing-features-item1">What's your name?</li> <input className="pricing-features-item2" name="username" value={user} onChange={(e)=>setUser(e.target.value)} placeholder="A nickname you prefer..."></input> </ul> <button className="pricing-button" onClick={()=>setUserName()}>Enter</button> </div> </div> </div> ) } export default Homepage

componente de la aplicación

 import './App.css'; import Navbar from './components/Navbar'; import Footer from './components/Footer'; import Homepage from './Pages/Homepage'; import Mainpage from './Pages/Mainpage' import {BrowserRouter as Router,Routes,Route} from 'react-router-dom' import {useState,useEffect} from 'react' function App() { const [userName,setUserName]=useState(null); return ( <div className="App"> <Navbar/> <Routes> <Route path='/' exact element={<Homepage username={userName} setusername={setUserName()} />}></Route> <Route path='/home' exact element={<Homepage/>}></Route> <Route path='/mainpage' exact element={<Mainpage/>}></Route> </Routes> <Footer/> </div> ); } export default App;