Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why does Invalid value for prop action on <form> tag

    // 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

like image 578
Mohan mohan Avatar asked Oct 27 '25 19:10

Mohan mohan


1 Answers

As the official docs say:

React’s extensions to <form> are currently only available in React’s canary and experimental channels. In stable releases of React, <form> works only as a built-in browser HTML component.

You can use canary channel.

npm install react@canary react-dom@canary
like image 198
Shuo Avatar answered Oct 29 '25 09:10

Shuo