CODEWITHSUNDEEP
javascriptreactjs
Wani
Wani

Reputation: 95

Prevent form from being refreshing when submitted in Reactjs

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;

Upvotes: 1

Views: 6046

Answers (6)

Drescky
Drescky

Reputation: 31

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.

Upvotes: 0

Ahmad
Ahmad

Reputation: 884

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>

Upvotes: 0

Solaiman Shadin
Solaiman Shadin

Reputation: 32

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
 }

Upvotes: 0

theunknownSAI
theunknownSAI

Reputation: 330

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>

Upvotes: 0

Nitin
Nitin

Reputation: 378

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;

Upvotes: 2

Ryan Le
Ryan Le

Reputation: 8412

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

Edit polished-hill-bg7dn

Upvotes: 2

Related Questions