I am getting this error cannot read property 'preventdefault' of undefined

Question

1.00/5 (1 vote)

See more:

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 12-Sep-21 15:21pm

Joseph-muvevi

Updated 12-Sep-21 23:42pm

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Answer 1 · 2021-09-12T23:42:00

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(); }
    ...

I am getting this error cannot read property 'preventdefault' of undefined

1 solution

Solution 1

Add your solution here

Preview 0

I am getting this error cannot read property 'preventdefault' of undefined

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us