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>
</>
);
}
how to resolve the error in react? not in JavaScript. If we are not use inner HTML instead of that what to use in that field?
Your immediate problem is that you are calling fun immediately and then assigning its return value (undefined) to onClick.
To go about this the way you are trying, you need to assign the function itself.
onClick={fun}
However, direct DOM manipulation runs counter to the way React is designed to work.
Your changes are likely to get wiped out if anything triggers a re-render.
React is designed to be data driven. To change the DOM you should change the data and let React pull it through to the DOM itself.
You should make use of state to track the data.
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>)
</>
);
}
In React, using the State Hook
https://reactjs.org/docs/hooks-state.html
Your code should be
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>
</>
);
}
This is because you are calling the fun function instead of binding it to the click.
It should be : <button onClick={fun}>click</button>
See this CodeSandbox