import React, { useState } from "react"; export default function DropDown() { const fun=()=>{ document.getElementById('id').innerHTML='Hello world' } return ( <> <button onClick={fun()}>click</button> <p id="id"></p> </> ); }¿Cómo resolver el error en reaccionar? no en JavaScript. Si no usamos HTML interno en lugar de eso, ¿qué usar en ese campo?
Su problema inmediato es que está llamando a fun inmediatamente y luego asignando su valor de retorno ( undefined ) a onClick .
Para hacer esto de la forma en que lo está intentando, debe asignar la función en sí.
onClick={fun}Sin embargo, la manipulación directa del DOM va en contra de la forma en que React está diseñado para funcionar .
Es probable que sus cambios se eliminen si algo activa una nueva representación.
React está diseñado para ser impulsado por datos . Para cambiar el DOM, debe cambiar los datos y dejar que React los lleve al propio DOM.
Debe hacer uso del estado para rastrear los datos.
export default function DropDown() { const [open, setOpen] = useState(false); const fun = useCallback(() => setOpen(open => !open), []); return ( <> <button onClick={fun}>click</button> {open && (<p>Hello, world</p>) </> ); }En React, usando el State Hook
https://reactjs.org/docs/hooks-state.html
Su código debe ser
import React, { useState } from "react"; export default function DropDown() { const [greeting, setGreeting] = useState('Hello world'); const onChange = () => { setGreeting('New greeting') } return ( <> <button onClick={onChange}>click</button> <p id="id">{greeting}</p> </> ); }Esto se debe a que está llamando a la función fun en lugar de vincularla al clic.
Debería ser: <button onClick={fun}>click</button>
Ver este CodeSandbox