Click here to Skip to main content
15,845,681 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I really need help here;
I am trying to submit a get request using data from select and input to fill in to the axios get request. Whenever i put event.preventDefault() on the submit function this error occurs

Onsubmit function

JavaScript
const trackItem = (e) => {
        e.preventDefault()
            axios.get(`http://localhost:8080/api/?${tracktype}/${trackno}`)
            .then(res => setShipment(res.data))
            .catch(err => console.log(err))
      }
    
      useEffect((e) => {
        trackItem(e)
      }, []);


the form

What could be the issue here?

What I have tried:

JavaScript
<pre>
    

      const trackItem = (e) => {
        e.preventDefault()
            axios.get(`http://localhost:8080/api/?${tracktype}/${trackno}`)
            .then(res => setShipment(res.data))
            .catch(err => console.log(err))
      }
    
      useEffect((e) => {
        trackItem(e)
      }, []);

the form


HTML
<pre><form onSubmit={trackItem} >
                <select type="text"  name="tracktype" 
                        onChange={handleSelect}  value={tracktype} required>
                            <option value="" disabled label="Please select tracking options"/>
                            <option value="logisticsrecords" label="Track Shipment" />
                            <option value="storageshipment" label="Truck Storage"/>
                        </select>
                        <br/>
                <input type="text" placeholder="Insert Track number" name="tracknumber" 
                        onChange={handleTrackno} value={trackno} required/>
                <button type="submit"> Search </button>
            </form>
Posted
Updated 13-Sep-21 0:42am

1 solution

The most likely cause is that your custom useEffect method - which you haven't shown - is calling the callback function passed as the first parameter without passing any arguments. You then try to call preventDefault on the first argument, which will be undefined.

You'll either need to fix your useEffect method to pass the correct value to the callback, or change the callback so that it doesn't try to use an undefined parameter.

For example:
JavaScript
const trackItem = (e) => {
    if (e && e.preventDefault) { e.preventDefault(); }
    ...
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900