TypeError: Cannot read property 'name' of null at editComponent.js :19
I'm performing edit/update operation but it give me the following error: TypeError: Cannot read property 'name' of null at editComponent.js :19
I'm attaching the code, can someone please help me.
import React,{Component} from 'react'
import axios from 'axios';
export default class EditComponent extends Component{
constructor() {
super()
this.state = {
name: "",
author: ""
}
this.handleChange = this.handleChange.bind(this)
this.submitHandleChange = this.submitHandleChange.bind(this)
}
componentDidMount() {
axios.get('localhost:4200/book/edit/'+this.props.match.params.id)
.then(response => {
this.setState({
name: response.data.name,
author: response.data.author
});
})
.catch(function (error) {
console.log(error);
})
}
handleChange(event) {
const {name, value} = event.target
this.setState({ [name]: value })
}
submitHandleChange(event){
event.preventDefault();
const book = {
name: this.state.name,
author: this.state.author
}
axios.post('localhost:4200/book/update/'+this.props.match.params.id, book)
.then(res => console.log(res.data));
this.props.history.push('/view');
}
render(){
return(
<div>
<h1> EditComponent </h1>
<form onSubmit={this.submitHandleChange}>
<input
type="text"
value={this.state.name}
name="name"
placeholder="First Name"
required
onChange={this.handleChange}
/>
<br />
<input
type="text"
value={this.state.author}
name="author"
placeholder="Last Name"
required
onChange={this.handleChange}
/>
<button >Submit</button>
</form>
</div>
)
}
}