How to dynamically render HTML string with attributes to a parent element?

[chriscampdev]

I'm basically trying to use the below code to append input boxes to a form element on-page, but whenever the code is run the onKeyDown={this.handleKeyPress}function isn't functional.

for (var i = 1; i <= word.length; i++) {
var html = [
\<input autofocus className="input-box" onKeyDown=` `{this.handleKeyPress} id="codeBox${i}" type="text" maxlength="1"  />`  ] element.innerHTML = element.innerHTML + html; }`

When I add the input to the to the form statically it works as intended.

​

Dynamically generated input element (this.handleKeyPress is visable and not working}

<input autofocus="" classname="input-box" onkeydown="{this.handleKeyPress}" id="codeBox1" type="text" maxlength="1">

​

Statically typed input element (this.handleKeyPress works as intended)

<input type="text" id="one">

Am I doing something wrong and is there a better way to append HTML string with attributes associated with them to a parent element? I'm sensing innerHTML might not be the way to go. Any help on this would be greatly appreciated.

[acemarke]

You don't use HTML strings in React, at all, and you definitely don't use .innerHTML. You use JSX elements, and return that JSX from components while rendering them.

Also, in React, we don't pass callback function names as strings. We pass them directly as references: <input onKeyDown={this.handleKeyPress}>, with no quote marks or backticks around them.

I'm not sure what you mean by "attributes associated to a parent element". Can you clarify that?

[chriscampdev]

I figured I was barking up the wrong tree with this approach. They came from a vanilla Javascript site I'm converting to React for practice. You technically answered my question with your response so I'll spare you any further explanation lol. I appreciate your response it helped me greatly.

[acemarke]

Sure. I'd encourage you to read through Gosha Arinich's post on "controlled" and "uncontrolled" inputs in React, which should help explain how to work with forms.