Sign in
Log inSign up

TypeError: Cannot read property 'name' of null at editComponent.js :19

Sambhav choradia's photo
Sambhav choradia
·Feb 26, 2019

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>



)

    }
}
Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct