Question 73644 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Uncaught TypeError: Cannot read properties of undefined (reading 'onDismiss') – Reactjs

I encountered this error while following the instructions of the Road to Learn React book. I’m trying to add "remove" buttons that will remove certain info and in the end render the updated list. This should be super basic but I couln’t figure out what I did wrong!

Here’s my code:

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

const lst = [
  {
    title: 'React',
    url: 'http://reactjs.org',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'http://redux.js.org',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
]



//COMPONENT DECLARATION:
class App extends Component {

  //constructor
  constructor(props) {
    super(props);
    this.state = {
      //object initializer
      lst: lst,
    };
    this.onDismiss = this.onDismiss.bind(this);
  }

  //onDismiss functionality: return id that's not chosen
  onDismiss(id){
    function isNotId(item){
      return item.objectId !== id;
    }
    const updatedList = this.state.lst.filter(isNotId);

    //update the list in the local component state
    this.setState({ lst: updatedList });
  }

  render() {
    //definint "learn react" as a variable
    const msg = "Learn React Now"
    return (
      <div className="App">

        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            {msg}
          </a>

          {
            this.state.lst.map(function(item){
              return (
                <div key={item.objectID}>
                  <span>
                    <a href={item.url}>{item.title}</a>
                  </span>
                  <span>; {item.author}</span>
                  <span>; {item.num_comments}</span>
                  <span>; {item.points}</span>
                  <span>
                    <button 
                      onClick={() => this.onDismiss(item.objectID)} 
                      type='button'
                    >
                      Dismiss
                    </button>
                  </span>
                </div>
              )
            })
          }
        </header>
      </div>
    );
  }
}

export default App;

Some websites said it was when I tried to use the map function on the list…but my list variable was already passed as props? What did I do wrong? I’m new to React so please help!! Thanks

Tags:

2

Answers


  1. 0

    There are 2 problems with your component:

    1. You should use arrow function when rendering the array, something like
    this.state.lst.map(item => {
  return (...)
})

    if you use function, then this in the onClick={() => this.onDismiss(item.objectID)} is already not the component.
    You can read more about arrow function here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

    1. There is a typo in the isNotId function, it should be item.objectID, not item.objectId.
    Login or Signup to reply.
  2. 0

    WARNING: I am no expert, and could be wrong, but here’s a try! 🙂 n your button, try just using: onCLick={this.onDismiss(item.objectID)} , without the arrow function. the arrow function means you are defining a new anonymous function, and the this keyword is probably not referring to what you think it is. On another note, you may want to consider watching/reading some tutorials about ‘Functional React’. Alot of people are no longer writing react components with classes. Not using classes, means you (mostly) never have to deal with the ‘this’ keyword. ‘this’ is confusing. with functional react, instead of using the lifecycle functions, you use Hooks. and the component returns JSX instead of using the Render method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search