CODEWITHSUNDEEP
reactjsweb-development-server
Neha Chaudhary
Neha Chaudhary

Reputation: 1269

Why am I getting the unhandled rejection error for my web application?

I recently started making a web application for wannabe writers. Here, one can signup and login. And can create genres and write into them. I'm building this application using ReactJS.

Now, I'm getting error whenever I try to create a new genre.

The error looks like this: https://i.sstatic.net/3l69H.jpg

AddGenre.js File

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Paper from 'material-ui/Paper';
import { notify } from 'react-notify-toast';
import TextField from 'material-ui/TextField';
import { Link } from 'react-router-dom';
import '../styles.css';
import axiosInstance from '../Constants/AxiosCall';


class AddGenre extends Component {
  // initialize state
  state = {
    name: '',
    desc: '',
  }

  // handle user input
  handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({ [name]: value });
  }

  // handle add category request
  handleAddGenre = () => {
    const payload = new FormData();
    payload.set('name', this.state.name);
    payload.set('desc', this.state.desc);

    // send POST request to API
    axiosInstance.post('genre', payload)
      .then((response) => {
        notify.show(response.data.message, 'success', 4000);
        this.props
          .history
          .push('/genres');
      })
      .catch((error) => {
        notify.show(error.response.data.message, 'error', 4000);
      });
  }

  // render add category form
  render() {
    const style = {
      marginLeft: 20,
      width: 340,
    };
    const divstyle = {
      width: 430,
      margin: 'auto',
      textAlign: 'left',
      paddingLeft: 20,
    };
    return (
      <MuiThemeProvider>
        <div className="main">
          <div className="inputs" style={{ paddingTop: '150px' }}>
            <Paper zDepth={2} style={divstyle}>
              <p className="heading"><b>ADD GENRE</b></p>

              <TextField
                floatingLabelText="Name"
                name="name"
                value={this.state.name}
                style={style}
                onChange={this.handleInputChange}
              /><br /><br />

              <TextField
                floatingLabelText="Description"
                name="desc"
                value={this.state.desc}
                style={style}
                onChange={this.handleInputChange}
              /><br /><br /><br />

              <div className="buttons">
                <button className="network" id="one" onClick={(event => this.handleAddGenre(event))}>ADD</button>
                <Link to="/genres"><button className="network" id="two">CANCEL</button></Link><br /><br /><br />

              </div>

            </Paper><br />

          </div>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default AddGenre;

The hierarchy of the project looks like this https://i.sstatic.net/dlbXe.jpg

Please help by telling me to resolve the error.

Upvotes: 0

Views: 210

Answers (1)

Atin Singh
Atin Singh

Reputation: 3690

It seems like in your .catch() the error does not have a response object.

Change your .catch to

.catch((error) => {
     console.log("error is", error);
     //notify.show(error, 'error', 4000);
 })

This should at least solve your current error.

Upvotes: 1

Related Questions