.tsx component Button onclick event shows undefined

Question

I create a .tsx component and a function that is returning dynamic HTML.

   getCellValues(_data) {
    var ret=`<div onClick="`+this.selectDate("1")+`">1</div>`;
     console.log(ret)
     return ret; }

and this select data function looks like

 selectDate(_data: string) {
     console.log("*****selectDate**************************");
     console.log(_data); }

and in component constructor added this line of code.

this.selectDate = this.selectDate.bind(this);

but after loading component this div onclick event shows undefined... ANd the rendered html looks like..

<div onclick="undefined">1</div>

Any ideas?

score 0 · Answer 1 · answered May 06 '20 at 11:24

0

You could simply return the JSX:

getCellValues(_data) {
  return <div onClick={() => this.selectDate(1)}>1</div>
};

answered May 06 '20 at 11:24

gqstav

i cant return like this because i am having a complete dynamic html block and this div is the part of that html block – user3603745 May 06 '20 at 11:35
I see. I don't know the fix for this, but ideally, you'd refactor the code so it's not using dynamic HTML this way. The point of using React kind of evaporates. – gqstav May 06 '20 at 12:08
actually i am creating a dynamic calender so i have to use dynamic html – user3603745 May 06 '20 at 12:19
How so? I'd gladly look into a snippet, but I doubt it's not refactorable into generic JSX components. – gqstav May 06 '20 at 12:21
Its not possible for me to upload complete snippet here... i have a calender with all dates should be clickable event.. and for that i want this button click event which is currently undefined – user3603745 May 06 '20 at 12:41

1 Answers1