i don't know how to fix this and i really need some explanation
import axios from 'axios';
import test from './test';
import '../scss_files/add_product_style.scss';
import '../scss_files/error_popup.scss';
import React, { Component } from 'react';
const defaultState = {
type: '',
sku:'',
name:'',
price:'',
book:'',
size: '',
height: '',
width: '',
length: '',
priceError: '',
typeError: '',
skuError: '',
bookError: ''
}
export default class add_product extends Component {
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
//this.onChangeType = this.onChangeType.bind(this);
this.onChangeAttribute = this.onChangeAttribute.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state= defaultState;
}
/*onChangeType(e) {
this.setState({
type:e.target.value
})
}*/
onChangeAttribute(e) {
this.setState({
[e.target.name]:e.target.value
})
}
validate = () => {
let typeError = '';
let skuError = '';
let nameError = '';
let priceError = '';
let bookError = '';
let sizeError = '';
let heightError = '';
let widthError = '';
let lengthError = '';
if (!this.state.price.match(/^[0-9]+$/)){ /// use the 'match()' method to not allow the 'priceError event'
priceError = 'Please insert a price';
}
if (!this.state.type){
typeError = 'Please select the type';
}
if (!this.state.sku){
skuError = 'Please, insert the sku';
}
if (priceError || typeError || skuError) {
this.setState({priceError,typeError,skuError});
return false;
}
return true;
}
onSubmit(e) {
e.preventDefault();
const isValid = this.validate();
if(isValid) {
const obj = {
type:this.state.type,
sku:this.state.sku,
name:this.state.name,
price:this.state.price,
book:this.state.book ,
size:this.state.size ,
height:this.state.height + 'x',
width:this.state.width + 'x',
length:this.state.length
}
//clear the form
// axios.post("http://localhost/scandiweb-test/src/backend/insert.php" ,obj)
//.then(res => console.log(res.data));
console.log(obj);
this.setState = (defaultState);
};
}
renderSelectedForm(type) {
switch(type) {
case '1':
return <form className = 'weight-style'>
<label for="fname">Weight</label>
<input type="text" name="book"
value = {this.state.book}
onChange={this.onChangeAttribute}></input>
</form>
case '2':
return <form>
<label for="fname">Size(MB)</label>
<input type="text" name="size"
value = {this.state.size}
onChange={this.onChangeAttribute}></input>
</form>;
case '3':
return <form >
<label for="height">Height</label>
<input name="height"
value = {this.state.height}
onChange={this.onChangeAttribute}
/>
<label for="width">Width</label>
<input name="width"
value = {this.state.width}
onChange={this.onChangeAttribute}
/>
<label for="length">Length</label>
<input name="length"
value = {this.state.length}
onChange={this.onChangeAttribute}
/>
</form>;
default:
return null;
}
}
In the handleChange says that setState is not a function.
i tried to console.log the 'type' from the default state and it shows the value of the select form as is should
handleChange(e) {
this.setState({
[e.target.name]:e.target.value
})
}
I've looked everywhere in the code and i still couldn't figure it out.
render() {
return (
<div>
<div className = 'header2'></div>
<div className = 'header'></div>
<h1 className="title">Add Product</h1>
<div className = 'input_position'>
<label>SKU</label>
<input name = "sku" value = {this.state.sku}
onChange={this.onChangeAttribute}/>
<small style={{color: "red"}}>{this.state.skuError}</small>
<label>Name</label>
<input name = "name" value = {this.state.name}
onChange={this.onChangeAttribute}/>
<div>{this.state.nameError}</div>
<label>Price</label>
<input name = "price" value = {this.state.price}
onChange={this.onChangeAttribute}/><br/>
<small style={{color: "red"}}>{this.state.priceError}</small>
<form >
<select name="type" value={this.state.type} onChange={this.handleChange}>
<option value="0" selected="selected">Type</option>
<option value="1">Book</option>
<option value="2">DVD</option>
<option value="3">Furniture</option>
</select><br/>
<small style={{color: "red"}}>{this.state.typeError}</small>
</form>
{this.renderSelectedForm(this.state.type)}
<button className = 'submit' onClick={this.onSubmit}>Submit</button>
</div>
</div>
)
}
}