I created simple web page using react and express. One module contains simple form with text input field, email input field and submit button and on submit it should send the mail to me, containing data from input fields. I used nodemail to create this sending mail thing! Luckily it works on chrome, unluckily it doesnt work on other browsers( firefox, IE, chrome on mobile ).

I found out that the problem is not in the backend side, but in the function connecting frontend with backend, but after that I got stuck and dont know what to do :(

 onSubmit = e => {
    var newMessage = {
        msg_sender: this.state.msg_sender,
        msg_content: this.state.msg_content
        }
        axios.post("http://localhost:4000/message", newMessage)
            .then(res => console.log(res.data))
            .catch(err => console.log("Error! " + err)
            );
    };

That is the part connecting frontend with backend - as I said, it works fine in chrome, but doesnt in other browsers.

1 Answers

0
yourfavoritedev On Best Solutions

Arrows functions are still a relatively new feature in JavaScript and unfortunately some browsers are still not up-to-date and likely never will be able to support them (Looking at you Internet Explorer).

There's a couple of ways to work around this.

1) You could rework all your arrow functions into standard functions:

onSubmit = function(e){
    var newMessage = {
        msg_sender: this.state.msg_sender,
        msg_content: this.state.msg_content
        }
    var axiosSetup = axios.create({
         baseURL: "http://localhost:4000"
    })

        axiosSetup.post("/message", newMessage)
            .then(function(res){ console.log(res.data) })
            .catch(function(err){ console.log("Error! " + err) })
            );
    };

2) You can integrate Babel in your application, which is a compiler that converts your javascript into compatible code for all browsers:

https://babeljs.io/

If you're building application for browser-compatibility it will also be in your best interest to check out mozilla's web developer guide which is a great reference to check if your code will work on other browsers.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Alternatively, you can also use JavaScript's native fetch API. The benefit being that you do not have to install any libraries and its setup for use will be the same across all browsers

onSubmit = function(e){
    var newMessage = {
        msg_sender: this.state.msg_sender,
        msg_content: this.state.msg_content
   }
    fetch('http://localhost:4000/message', {
       method: 'POST',
       body: newMessage
    })
    .then(function(res){ console.log(res.json()) })
    .catch(function(err){ console.log("Error! " + err) })

};

See documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch