Why can I not add a name attribute in JSX?-CodePudding

For example I have the following JSX. the name and id attributes are ignored when formHtml is rendered to the DOM. Where am I going wrong? *Please keep in mind the html I am rendering is not meant to be a controlled component or what have you. I'm also aware that "for" attribute should be "htmlFor" in React, but for reasons I need it to be "for" as the rendered html will be exported for the user eventually and is not intended to be used by the React application. Any tips on how to remove error messages about htmlFor would be greatly appreciated! :)

EDIT: So turns out I'm a bit silly and el.value simply didn't exist. I've changed it to a value that does exist and now all is working fine. If anyone has a tip on removing the htmlFor warning though that would be awesome. Thank you to the commenter who prompted me to realise my mistake.

const formHtml = form.map((el) => {
let element = null
let classes = 'block'

if (el.element === 'select') {
  const optionTags = el.optionValues.map((el, index) => {
    return (
      <option value={el} key={index}>
        {el}
      </option>
    )
  })
  element = <select name={el.value}>{optionTags}</select>
} else {
  if (el.type === 'checkbox' || el.type === 'radio') {
    classes = 'block flex-hori'
  }

  if (el.element === 'input') {
    element = <input name={el.value} id={el.value} type={el.type}></input>
  } else {
    element = <el.element name={el.name} id={el.value}></el.element>
  }
}

return (
  <div className={classes} key={el.id}>
    <label for={el.label}>{el.label}</label>
    {element}
  </div>
)
 })

CodePudding user response：

So turns out I'm a bit silly and el.value simply didn't exist. I've changed it to a value that does exist and now all is working fine. If anyone has a tip on removing the htmlFor warning though that would be awesome. Thank you to the commenter who prompted me to realise my mistake.

CodePudding user response：

Your label has for property, it should be htmlFor:

I'm also aware that "for" attribute should be "htmlFor" in React, but for reasons I need it to be "for" as the rendered html will be exported for the user eventually and is not intended to be used by the React application.

Actual rendered HMTL will have for property not htmlFor. You don't have to worry about it. The point you are not aware of is these JSX elements are eventually rendered in the browser as HTML elements with their counterpart properties (JSX htmlFor -> HTML for).

const form = [
  {
    element: "select",
    optionValues: ["A", "B"],
    label: "select name",
    name: "select1",
    id: 123
  },
  {
    element: "input",
    type: "number",
    value: 777,
    label: "input name",
    name: "input1",
    id: 456
  }
];

function App() {
  const formHtml = form.map((el) => {
    let element = null;
    let classes = "block";

    if (el.element === "select") {
      const optionTags = el.optionValues.map((el, index) => {
        return (
          <option value={el} key={index}>
            {el}
          </option>
        );
      });
      element = <select name={el.value}>{optionTags}</select>;
    } else {
      if (el.type === "checkbox" || el.type === "radio") {
        classes = "block flex-hori";
      }

      if (el.element === "input") {
        element = <input name={el.value} id={el.value} type={el.type}></input>;
      } else {
        element = <el.element name={el.name} id={el.value}></el.element>;
      }
    }

    return (
      <div className={classes} key={el.id}>
        <label htmlFor={el.label}>{el.label}</label>
        {element}
      </div>
    );
  });

  return <form className="">{formHtml}</form>;
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

For the above example if you inspect the browser, the label of select element is:

<label for="input name">input name</label>

You might have felt like what you have written is also HTML, but it's not, check here, Your JSX transpiled into Javascript.