Prevent form from being refreshing when submitted in Reactjs

Question

Hi I have a Reactjs component in this component .I have a form inside the form i have a search field..when the user hit enter my component reloads.I want to use |prevent defaultso that mycomponentnot reloads when user hitsenter key.How to use in my code`

    import React, { useState } from "react";
    import data from "./info.json";
    function App() {
      const [searchTerm, setSearch] = useState(null);
    
      return (
        <div>
           <form>
          <input
            type="text"
            id=""
            placeholder="Search"
            onChange={(e) => setSearch(e.target.value)}
          />
</form>
    
          {data
            .filter((data) => {
              if (searchTerm == null) {
                return data;
              } else if (
                data.name.toLowerCase().includes(searchTerm.toLowerCase())
              ) {
                return data;
              }
            })
            .map((data) => (
              <li>{data.name}</li>
            ))}
        </div>
      );
    }
    
    export default App;

Answer 1

You will need to add preventDefault() to your form like so:

Add preventDefault() to your onSubmit event of your form:

<form onSubmit={e => e.preventDefault()}>
  <input
    type="text"
    id=""
    placeholder="Search"
    onChange={e => {
      setSearch(e.target.value);
    }}
  />
</form>;

Answer 2

ReactJS supports the onSubmit event by emitting synthetic events for native HTML elements.

For a <form> element, you can use the submit event to prevent the default behavior by using event.preventdefault().

You can do it in two easy steps:

1. Define an event handler for your form
2. Use the event handler to prevent form submission

import React, { useState } from "react";
import data from "./info.json";
function App() {
    const [searchTerm, setSearch] = useState(null);

    const fnHandleSubmit = event => {
        event.preventDefault();
    }

    return (
        <div>
            <form onSubmit={fnHandleSubmit}>
                <input
                type="text"
                id=""
                placeholder="Search"
                onChange={(e) => setSearch(e.target.value)}
                />
            </form>
            {data
            .filter((data) => {
                if (searchTerm == null) {
                return data;
                } else if (
                data.name.toLowerCase().includes(searchTerm.toLowerCase())
                ) {
                return data;
                }
            })
            .map((data) => (
                <li>{data.name}</li>
            ))}
        </div>
    );
}

export default App;

Answer 3

Add an onSubmit event handler on the form ,

<form onSubmit={handleOnsubmit}> </form> 

in your handleOnsubmit function perfrom event.preventDefault()

function handleOnsubmit(event) {

   event.preventDefault();
   // Do Whatever you want
 }

Answer 4

When clicked Enter, it triggers onSubmit(), default action is to refresh. So to onSubmit() add preventDefault to overcome default behaviour.

Add the following line.

<form onSubmit={e => { e.preventDefault(); }}>
//code
</form>

Answer 5

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

For example, this can be useful when:

• Clicking on a "Submit" button, prevent it from submitting a form

• Clicking on a link, prevent the link from following the URL

const Test = () => {
  const submit = (e) => {
    e.preventDefault();
    console.log('I am here without refresh the form!')
  }
  return <form onSubmit={submit}>
    <input type = 'text' ></input> 
    </form>
}

ReactDOM.render( <Test/> ,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Answer 6

All you need is to add e.preventDefault(); to your onSubmit function to prevent your component from reloading.

However, I'll advise you to use React UI solutions like Ant Design which provides the feature out of the box and also allow you to write your code more efficiently.