onClick is not defined MERN stack

Question

I am making a college registration website and I was trying to make a list where the student can choose a certain major to view all the courses in it so I made a list with all the majors and buttons infront of them but everytime i try to use a onClick() function to go to another page with the courses list it says undefined.

My code:

import React, { Component } from 'react';
import axios from 'axios';
import { Table } from 'react-bootstrap'
import { Button, Icon } from 'semantic-ui-react';
import { Image, List } from 'semantic-ui-react'
import { left } from '@popperjs/core';

export default class CreateExercise extends Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }

    onClick(e) {
        window.location = '/' + e
    }

    render() {
        return (
            <div>
                <ul>
                    {['Adolescence Education: Chemistry (7-12)',
                        'Adolescence Education: Social Studies (7-12)',
                        'Biological Sciences',
                        'Chemistry',
                        'English',
                        'History',
                        'Industrial and Labor Relations',
                        'Liberal Arts',
                        'Media and Communications',
                        'Philosophy and Religion',
                        'Politics & Economics & Law',
                        'Spanish Language',
                        'Visual Arts',
                        'Adolescence Education: Biology (7-12)',
                        'Adolescence Education: Mathematics (7-12)',
                        'Biochemistry',
                        'Business Administration',
                        'Childhood Education (1-6)',
                        'Computer & Information Science',
                        'Criminology',
                        'Finance',
                        'General Studies',
                        'Health and Society',
                        'Industrial and Labor Relations',
                        'Management Information Systems',
                        'Marketing',
                        'Mathematics',
                        'Psychology',
                        'Sociology',
                        'Special Education and Childhood Education (1-6)',
                        'Visual Arts: Electronic Media'
                    ].map(function (item) {
                        return (
                            <li key={item}>
                                {item}
                                <button type="button" type="button" onClick={onClick({ item })} style={{ position: 'absolute', left: '50%' }} >Click to view courses</button>
                            </li>
                        );
                    })}
                </ul>
            </div>
        )
    }
}

`onClick={onClick({ item })}` should be `onClick={()=>this.onClick(item)}` — Lakshya Thakur, Feb 28 '21 at 18:44
@DanielCheung i got TypeError: Cannot read property 'onClick' of undefined — esmail saba, Feb 28 '21 at 18:51
@esmailsaba sorry, I deleted my comment after you've read it. Lakshya's answer was correct. The reason being `onClick` is not defined as a variable, but a property of `this`. — Daniel Cheung, Feb 28 '21 at 18:54

score 0 · Answer 1 · answered Feb 28 '21 at 20:00

0

onClick is not defined as a variable, it is a property.

onClick={onClick({ item })} is not correct because it calls onClick(), but onClick() is not defined, this.onClick() is.

Use onClick={() => this.onClick(item)}.

answered Feb 28 '21 at 20:00

0xLogN

3,289
1
14
35

it still gives me Cannot read property 'onClick' of undefined when i click on the button – esmail saba Feb 28 '21 at 20:40

score 0 · Accepted Answer · answered Feb 28 '21 at 21:06

0

There's two parts to the issue here. The first is, as others have pointed out, that you need to be calling this.onClick() since the click handler is a property on your CreateExercise class and not a variable.

onClick={() => this.onClick(item)}

The reason this alone does not fix it is because you are not actually referencing the this from your class. You are referencing the anonymous function used as a callback from your map, which has its own this and obviously not an onClick property:

{[...arrayOfCourses].map(function(item) { ... })}

The easiest way to remedy this is to convert to an arrow function which does not have its own this context but instead inherits from the scope above (your class component).

{[...arrayOfCourses].map((item) => { ... })}

See this thread for more details on the difference between the two function expression types.

answered Feb 28 '21 at 21:06

lawrence-witt

8,094
3
13
32

i just have another question if that's okay when it goes to the majors/ page it goes with [object%20object] instead of the name how can i fix that – esmail saba Feb 28 '21 at 22:04
Your original example is calling the method as `onClick({item})` - make sure its `onClick(item)` as in this answer. Passing `{item}` creates an object with one property called `item` which is the name of the course - this will be cast to the `[object Object]` syntax when concatenated with a string. Also, a side note, most of the strings in that array are not valid URLs (a space will usually be converted to %20) so just adding them to the window location is probably not going to generate any useable routes unless you're expecting that. – lawrence-witt Feb 28 '21 at 22:36
oh i did like you said but the same happens and yes i want it sent with the 20% – esmail saba Feb 28 '21 at 22:44
I really don't know why that would be. Try logging `e` in the click handler before adding it to the location and that should tell you what you have if its not the string. – lawrence-witt Feb 28 '21 at 22:51

onClick is not defined MERN stack

2 Answers2