TypeError: Cannot read property 'name' of undefined error in a controlled-component

Active3 hr before
Viewed126 times

6 Answers


I'm trying to get a date as user input through a controlled component but always running into this error "TypeError: Cannot read property 'name' of undefined". This is the piece of code that's causing the error. I'm using the react-datepicker module to get the Date input as when I try to use the HTML input type="date" i'm unable to disable previousdates.,The bottom line is: you have to pay attention to what onChange is expected to receive. It will differ depending on the input type or the library implementation.,There's a lot of other solutions that would work if you really want to stick to one change handler, but I recommend just creating two like above.

You should use a separate handler for the date change handler since they expect different signatures.

const onChange = e => setFormData({
   [e.target.name]: e.target.value
const onDateChange = date => setFormData({
   due_at: date
load more v

If you run into this error while writing React, the odds are high that you are trying to use a function within another function and are trying to access the this keyword within the nested function. But why does this happen? ,If you are a React developer or are just learning to program in JavaScript, you might have run into this dreaded error while trying to read a property off of the this keyword:,This guide will dive into how function scope works in JavaScript. You will learn why this error occurs and what you can do to fix it.

1TypeError: Cannot read property '<your property name>' of undefined
load more v

 Pretag team - issue, fix, solve, resolve

I am building a node Js project and i am saving the values of form to a mongoDB database. Despite of trying i couldn’t find what is causing this error. Error is at router.post function on 3rd line.,you can see clearly I have defined the newEmployee Object, so why ‘name’ is the property of undefined.,It doesn’t look like you’re using a body parser. Without one, req.body will always be undefined, which looks like your issue. Try putting this before you define any of your routes.

const express = require('express');
const router = express.Router();
const Employee = require('../models/employee');

router.get('/', (req, res) => {

router.get('/employee/new', (req, res) => {

router.post('/employee/new', (req, res) => {
   let newEmployee = {
      name: req.body.name,
      designation: req.body.designation,
      salary: req.body.salary
   Employee.create(newEmployee).then(employee => {
   }).catch(err => {

module.exports = router;
load more v

 Pretag team - issue, fix, solve, resolve

<input type="text" class="form-control form-control-static" v-model="property.owner.name">,property.owner.name is there, has a value. In fact, prints in the form.,If I change v-model to property.owner I get an [object Object] value and no error.

The method:

fetchProperty: function() {

   window.axios.get(home_url + '/wp-json/wp/v2/properties/' + this.$route.params.id)
      .then(function(response) {

         this.property = {
            title: response.data.title.rendered,
            block: response.data.meta_fields.block,
            type: response.data.meta_fields.type,
            lot: response.data.meta_fields.lot,
            delivery_date: response.data.meta_fields.delivery_date,
            owner: response.data.meta_fields.owner


Other "error-undefined" queries related to "TypeError: Cannot read property 'name' of undefined error in a controlled-component"