// handle form submitting from client side
export default function Search() {
function search(formData) {
const query = formData.get("query");
alert(`You searched for '${query}'`);
}
return (
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
);
}
react-dom.development.js:86 Warning: Invalid value for prop action on form tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
at form
at Search
printWarning @ react-dom.development.js:86 error @ react-dom.development.js:60 warnUnknownProperties @ react-dom.development.js:3815 validateProperties$2 @ react-dom.development.js:3827 validatePropertiesInDevelopment @ react-dom.development.js:9541 setInitialProperties @ react-dom.development.js:9830 finalizeInitialChildren @ react-dom.development.js:10950 completeWork @ react-dom.development.js:22193 completeUnitOfWork @ react-dom.development.js:26596 performUnitOfWork @ react-dom.development.js:26568 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performConcurrentWorkOnRoot @ react-dom.development.js:25738 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 Show 16 more frames Show less
I’m learning react from react official docs ‘react.dev’ site but unfortunately I stuck here please help me what is happing here. My react version is 18.3.1
Above react component does not produce output as I expect. In Search component search() {…} is defined which having two statement but form tag produce warning invalid prop action
on form tag.
But in official docs above code produce result well but in my app.js file code not work, alert pop- up not show, but in official docs alert pop-up show and without any form tag prop(action) warning.
official docs link