API, FUNCTIONS, BUTTON NOT FIRING IN REACT

I am currently building a MERN application.

It is working fine on localhost – desktop, then I thought of exploring it on mobile, so I created a local network. See below for how to create and connect to local network.

Alas, some of my buttons were not…


This content originally appeared on DEV Community and was authored by ADEKOLA Abdwahab

I am currently building a MERN application.

It is working fine on localhost - desktop, then I thought of exploring it on mobile, so I created a local network. See below for how to create and connect to local network.

Alas, some of my buttons were not responding.

What could have happened?

Upon troubleshooting, I realized that only 'SUBMIT' buttons were not working.

... after hours of googling ...

I threw alert('i clicked') inside the onclick function, I got the alert whenever I clicked.

It was then I realized that I was calling a wrong API url.

How?

The API URL i was calling is http://localhost:4000. Port 4000 was where my backend is connected to. This would work fine on my local machine. However, it wont work over the network, because localhost === 127.0.0.1, which is different from Local Area Network Address - 192.168.43.263 .

SOLUTION:

I change http://localhost:4000 to http://192.168.43.263:4000 for all instances.

HOW TO CREATE A LOCAL NETWORK?

Simple and straight forward:

A. Get your local ip:

  1. open command prompt or any command line interface: image
  2. Type in ipconfig: image
  3. Click enter:
    image

  4. The marked is your IP.

B. Connect your laptop (where your localhost is domiciled) to the same network with the other device (may be your phone) you want to use. This could be achieved by connecting them to the same wifi hubspot.

My mobile device is connected to ColdVi wifi, same with my laptop, hence they are on the same network.
image
WhatsApp Image 2021-04-10 at 3.26.42 PM

C. On the other device, enter this combination in your browser:

http://yourIP:port
WhatsApp Image 2021-04-10 at 3.46.29 PM

do not miss out the colon in between

Your site should load.


This content originally appeared on DEV Community and was authored by ADEKOLA Abdwahab


Print Share Comment Cite Upload Translate Updates
APA

ADEKOLA Abdwahab | Sciencx (2021-04-10T14:53:36+00:00) API, FUNCTIONS, BUTTON NOT FIRING IN REACT. Retrieved from https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/

MLA
" » API, FUNCTIONS, BUTTON NOT FIRING IN REACT." ADEKOLA Abdwahab | Sciencx - Saturday April 10, 2021, https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/
HARVARD
ADEKOLA Abdwahab | Sciencx Saturday April 10, 2021 » API, FUNCTIONS, BUTTON NOT FIRING IN REACT., viewed ,<https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/>
VANCOUVER
ADEKOLA Abdwahab | Sciencx - » API, FUNCTIONS, BUTTON NOT FIRING IN REACT. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/
CHICAGO
" » API, FUNCTIONS, BUTTON NOT FIRING IN REACT." ADEKOLA Abdwahab | Sciencx - Accessed . https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/
IEEE
" » API, FUNCTIONS, BUTTON NOT FIRING IN REACT." ADEKOLA Abdwahab | Sciencx [Online]. Available: https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/. [Accessed: ]
rf:citation
» API, FUNCTIONS, BUTTON NOT FIRING IN REACT | ADEKOLA Abdwahab | Sciencx | https://www.scien.cx/2021/04/10/api-functions-button-not-firing-in-react/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.