How to write data-remote = "true" when using createElement in ReactJS?

Question

I am creating a form using createElement()in ReactJSX .

My code is as follows:

var form = document.createElement('form');

form.id = "new_message_form";
form.method = 'post';
form.className = 'chat_input';

I want to use data-remote="true"in this form (it should be something like this:

form.data-remote="true";

Can anyone advise how to do this?

Answer 1

Since there is no standard attribute in html forms, such as data-remoteor remote, this is just a custom attribute that definitely applies to rails.

Docs on data- * attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

, , :

form.setAttribute("data-remote", "true");

Answer 2

JSX

<form id="new_message_form" method="post" className="chat_input" data-remote="true"/>

desugared to JS

React.createElement("form", { id: "new_message_form", method: "post", className: "chat_input", "data-remote": "true" })

JSX Babel REPL, , , : http://babeljs.io/repl/

Answer 3

I solved the problem with setting the attribute directly on the form. Code: form.setAttribute ("data-remote", "true");