I want to post data to my API from this form. But unfortunately, there is a Server error. Could anybody tell what exactly is the problem? (I observed that the id is not being generated for the object) This is the error that I'm getting in the console after clicking on submit button:
POST https://alert-amigo-api.herokuapp.com/products 500 (Internal Server Error) Response {type: "cors", url: "https://alert-amigo-api.herokuapp.com/products", redirected: false, status: 500, ok: false, …} type: "cors" url: "https://alert-amigo-api.herokuapp.com/products" redirected: false status: 500 ok: false statusText: "Internal Server Error"
This is my code:
import React, { Component } from "react";
import { Link } from 'react-router-dom';
import { Form, FormControl, FormCheck } from 'react-bootstrap';
import { FormGroup, ControlLabel, Row, Button, Checkbox, Radio, HelpBlock } from "react-bootstrap";
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
class Typography extends Component {
constructor() {
super();
this.state = {
productName: '',
productPrice: '',
productCategory: '',
productBrand: '',
countryOfOrigin: '',
riskType: '',
alertSubmittedBy: '',
yourCity: '',
yourAddress: '',
productImage: '',
description: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
}
changeHandler = e => {
this.setState({[e.target.id]: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
console.log('The form was submitted with the following data:');
console.log(this.state);
fetch('https://alert-amigo-api.herokuapp.com/products',{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(this.state)
}).then(response => {
console.log(response)
})
.catch(error =>{
console.log(error)
});
}
render() {
return (
<div className="typoForm">
<form onSubmit={this.handleSubmit}>
<FieldGroup
id="productName"
name="productName"
type="text"
label="Product Name"
placeholder=""
value={this.state.productName}
onChange={this.changeHandler}
/>
<FieldGroup
id="productPrice"
name="productPrice"
type="number"
label="Product Price (in Euros)"
placeholder=""
value={this.state.productPrice}
onChange={this.changeHandler}
/>
<FormGroup controlId="productCategory" name="productCategory">
<ControlLabel>Category</ControlLabel>
<FormControl componentClass="select" name="productCategory" placeholder="select" onChange={this.changeHandler} value={this.state.selectValue}>
<option value="select">select the category to which the product belongs to</option>
<option value="electronics">Electronics</option>
<option value="cosmetics">Cosmetics</option>
<option value="apparels">Apparels</option>
<option value="footwear">Footwear</option>
<option value="accessories">Watches/Accessories</option>
<option value="handbags">Handbags/Wallets</option>
<option value="pharmaceuticals">Pharmaceuticals/Personal Care</option>
<option value="Toys">Toys</option>
</FormControl>
</FormGroup>
<FieldGroup
id="productBrand"
name="productBrand"
type="text"
label="Product Brand"
placeholder=""
value={this.state.productBrand}
onChange={this.changeHandler}
/>
<FieldGroup
id="countryOfOrigin"
name="countryOfOrigin"
type="text"
label="Country Of Origin"
placeholder=""
value={this.state.countryOfOrigin}
onChange={this.changeHandler}
/>
<FormGroup controlId="riskType" name="riskType">
<ControlLabel>Risk Type</ControlLabel>
<FormControl componentClass="select" placeholder="select" name="riskType" onChange={this.changeHandler} value={this.state.selectValue}>
<option value="select">select the level of risk</option>
<option value="high">high</option>
<option value="medium">medium</option>
<option value="low">low</option>
</FormControl>
</FormGroup>
<FormGroup controlId="alertSubmittedBy" name="alertSubmittedBy">
<ControlLabel>Alert Submitted By</ControlLabel>
<FormControl componentClass="select" onChange={this.changeHandler} name="alertSubmittedBy" placeholder="select" value={this.state.selectValue}>
<option value="select">select</option>
<option value="producers">producers</option>
<option value="consumers">consumers</option>
<option value="distributors">distributors</option>
</FormControl>
</FormGroup>
<FieldGroup
id="yourCity"
name="yourCity"
type="text"
label="Your City"
placeholder=""
value={this.state.yourCity}
onChange={this.changeHandler}
/>
<FormGroup controlId="yourAddress" name="yourAddress">
<ControlLabel>Your Address</ControlLabel>
<FormControl componentClass="textarea" name="yourAddress" onChange={this.changeHandler} value={this.state.value} placeholder="Enter your address here" />
</FormGroup>
<FieldGroup
id="productImage"
name="productImage"
type="file"
label="File"
value={this.state.value}
onChange={this.changeHandler}
help="Upload an image of the product."
/>
<FormGroup controlId="description" name="description">
<ControlLabel>Please mention the defaults of the product</ControlLabel>
<FormControl componentClass="textarea" name="description" onChange={this.changeHandler} value={this.state.value} placeholder="" />
</FormGroup>
<Button type="submit">Submit</Button>
</form>
</div>
);
}
}
export default Typography;
