Soy nuevo en reactjs, he estado tratando de diseñar una interfaz de usuario de tal manera que, con cada clic, muestre una alerta que indica que se ha hecho clic en este elemento li, pero cuando se procesa la página, veo que aparecen muchas alertas. ¿Alguien puede señalar un error en mi código y cómo evitarlo?
Aquí está el fragmento de código
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- <meta name="theme-color" content="#000000" /> --> <meta name="description" content="Web site created using create-react-app" /> <title>Grade Score</title> </head> <body> <div id="root"></div> </body> </html>índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );Aplicación.js
import './App.css'; function clickhandle (props) { alert("you clicked on" + props.name) } function Stud(props) { return <li onClick={clickhandle(props)}> { props.name }</li>; } function App() { const students = ['Anil', 'Bob' , 'Clara', 'Dew', 'John', 'Ravi', 'Ram']; return ( <> <ul> {students.map((student) => <Stud name={student} />)} </ul> </> ); }Quiero que las alertas se muestren solo si hago clic en el elemento li, pero en mi código aparece continuamente una alerta tan pronto como se carga la página.
Eso es porque está llamando a la función cuando se carga la página. Tienes que pasar una función a onClick , no llamar a la función directamente:
onClick={() => clickhandle(props)}