Cannot read property 'map' of undefined reactjs when i have declared the property already

uncaught typeerror: cannot read property of null
cannot read property 'value' of undefined angular 7
cannot read property of undefined typescript
cannot read property of undefined react
cannot read property of undefined angular
cannot read property 'get' of null
cannot read property of undefined node js
cannot read property 'update' of undefined

Hi I am running the following , I have set textfield property to a string and as far as I know thats an array and map functions should work on arrays but it still says Cannot read property 'map' of undefined, well Is it not defined in there in the state? Thanks

class App extends Component {

  state={
    textfield:"first value", 
  }

makeUnique =(textfield)=>{
  return String.prototype.concat(...new Set(textfield) );
}

  textchanged = (event)=>{
    this.setState({
      textfield:event.target.value,
      caltexlength:event.target.value.length,    
    })    
  }


  render() {
    let uniquechars=null;

    uniquechars=(<div>
      {
        this.textfield.map((char,index)=>{
          return <charComponent
          char ={this.makeUnique(this.state.textfield)}/>
        })
      }
    </div>)## Heading ##

Write the line this.textfield.map((char,index) as below.

[...this.state.textfield].map((char,index)

With the spread operator you will create an array from your string and you can call map on it.

Uncaught TypeError: Cannot read property of undefined In JavaScript, Uncaught TypeError: Cannot read property of undefined. JavaScript TypeError is thrown when an operand or argument passed to a function is incompatible with  Here is a common scenario. // We want to get the value of an input. varinputVal = document.getElementById("input").value; This will result in Uncaught TypeError: Cannot read property 'value' of null. The reason will be that the element with id inputdoes not exist. Let me break it down in simpler steps; varinput = document.getElementById("input"); input // when this fails, it returns null. input = nullvarinputVal = input.value;// this is the same as the following.

TextField is a string so why are you doing map on it. Map works only on arrays. To access state TextField it should be this.state.textField but not this.textField

So change

uniquechars=(<div>
  {
    this.textfield.map((char,index)=>{
      return <charComponent
      char ={this.makeUnique(this.state.textfield)}/>
    })
  }
</div>)

To

uniquechars=(<div>
   <charComponent
      char ={this.makeUnique(this.state.textfield)}/>
</div>)

​​Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined.​ The dreaded error we all hit at some point in JavaScript development. Could be  Dear @SeanM , I asked our backend team and they said that there was a field in that entity that was not compatible with PowerApps for some unknown reasons, more surprisingly that field is not the "name" field, what they did was that they created a similar entity and we were able to connect it to PowerApps.

You have to replace

this.textfield.map

to

this.state.textfield.split('').map

Uncaught TypeError: Cannot read property 'value' of undefined , Seems like one of your values, with a property key of 'value' is undefined. Test that i1 , i2 and __i are defined before executing the if statements: Uncaught TypeError: Cannot read property 'apply' of undefined at Array.<anonymous> Ask Question Asked today. Active today. Viewed 9 times 1. I want to retrieve all

How to avoid 'cannot read property of undefined' errors?, Update: If you use JavaScript according to ECMAScript 2020 or later, see optional chaining. TypeScript has added support for optional chaining in version 3.7. Uncaught TypeError: Cannot read property of undefined In JavaScript Description. If you don’t assign any value to a variable is of type ‘undefined’. A code also return the undefined value Code structure. Error. Debugging. If you get undefined error, you need to make sure that which ever

Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one simple way to prevent them,  everytime when i try to change somthing in the Alertbox they show me “ Please enter a number greater than or equal to 0” or “ cannot read property ‘settings’ of undefined” icon Best answer by Castorr91 21 December 2019, 14:54

TypeError: Cannot read property 'name' of undefined · Issue #10803 , 0.0-beta.7 (from 5.3.18), when I run storybook I see an error. hooks.js:232 Uncaught TypeError: Cannot read property  React-redux - Cannot read property 'map' of undefined. 1. reactjs router cannot read render of undefined. 38. Typescript React: Access component property types. 0.

Comments
  • TextField is a string so why are you doing map on it. Map works only on arrays. To access state TextField it should be this.state.textField but not this.textField
  • thanks @HemadriDasari I have tried that it says this.state.textfield.map is not a function,? Thanks
  • You shouldn’t do map on it as I told you map works only on array but not on strings.
  • till now, i was thinking that textfield was basicallly an array but its not its an array if we put textfield.split('')
  • textfield is a string and here we use the spread operator to spread the string and create an array of chars. This is a common practice in redux reducers for immutability of state, creating a new array using the prev state and new data. So you don't need to use textfield.split('').
  • Make sense - some work on strings and some doesn’t , and spread operator works both on strings and arrays equally .
  • Yes it is. When you want to create an immutable array, spread operator is the way to go. Especially when your state is an array, you have to pass a newly created array to setState using this. Have you solved your problem then?
  • Great to hear that Naveen. If this helped, please make sure to mark this answer as correct.