ReactJS undefined onClick attribute

Question

I'm beginner in ReactJS. I add HTML code in a div and this HTML code is for buttons, it's works, but the onClick attribute is always undefined. I tried two things but it doesn't work.

First try :

const createListPlaylist = (res) => {
    if (res === undefined)
        return;
    var list = "";
    for (let i = 0; i < res.data.items.length; i++)
        list += `<Button onClick=${createPlaylistWidget(res.data.items[i].id)}>${res.data.items[i].name}</Button><br>`;
    document.getElementById("PlayListViewer").innerHTML += list;
}

Second try :

const createListPlaylist = (res) => {
    if (res === undefined)
        return;
    var list = "";
    var listArray = [];
    for (let i = 0; i < res.data.items.length; i++) {
        listArray.push(createPlaylistWidget(res.data.items[i].id));
        list += `<button onClick=${displayPlaylitSelected(listArray[i])}>${res.data.items[i].name}</button><br>`;
    }
    document.getElementById("PlayListViewer").innerHTML += list;
}

Result :

createListPlaylist is called after an axios request and the res parameter is the response of the request and yes res.data.items[i].id is correct I can print in in the console with no problem. So, ask your help because I don't no why my onClick attribute is undefined and I don't find the answer.

Thank you in advance for the answers.

ilkerkaran · Accepted Answer · 2020-11-24 19:16:40Z

1

You need to pass functions to events inside {} in React;

...
.... onClick={()=>${.....}}

see below for more information;

https://reactjs.org/docs/handling-events.html

answered Nov 24, 2020 at 19:16

ilkerkaran

4,3923 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shravan Dhar · Accepted Answer · 2020-11-24 19:17:58Z

0

It's onClick and not onclick. Amend that change and it will work.

Pretty much all the props in react should be written in camelCase. Incase you want the element to appear in dom then you can write it in lowercase.

Also note, there is an exception for aria-* attributes and data-* data attributes to this case.

answered Nov 24, 2020 at 19:17

Shravan Dhar

1,57011 silver badges20 bronze badges

5 Comments

Brian Lee Over a year ago

It is actually onClick in React, but onclick in plain HTML.

Shravan Dhar Over a year ago

Correct my friend but the reason it is appearing in the HTML Dom here is because it has been passed in lowercase. If it's passed as camelCase (onClick), then it won't appear in the screenshot.

ilkerkaran Over a year ago

@Knick, it is already passed camelCase, it renders lower case in HTML tho

Brian Thompson Over a year ago

If you inspect a react project you will not see any onclick attributes in the HTML. You see it here because the button is not React, its a string literal.

Brian Thompson Over a year ago

See this answer for explanation.

Brian Thompson · Accepted Answer · 2020-11-24 19:37:52Z

0

JSX is not HTML

You cannot make a string of JSX and expect it to behave as a component or use JSX syntax. JSX is just a cleaner/easier way of writing JavaScript function calls (specifically React.createElement().

Unfortunately there is no simple fix to the code you provided it will require you to re-approach the problem thinking in React, but I can point out the problem areas.

You cannot treat strings as components.
When using react using document.getElementById().innerHTML is almost always an anti-pattern.
When assigning an event handler in React, you must pass it a function reference, you are instead calling a function and assigning its return value to onClick.

edited Nov 24, 2020 at 19:37

answered Nov 24, 2020 at 19:30

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

ReactJS undefined onClick attribute

3 Answers 3

Comments

5 Comments

JSX is not HTML

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

JSX is not HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related