React Fixing input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

This post covers solutions for **input is a void element tag and must neither have children nor use dangerouslySetInnerHTML**.

React throws an error while void elements contain children or are used dangerouslySetInnerHTML.

Void elements in HTMl are self closing tags which don’t haave any content, Examples are <input />,<button>,<br/>

This is a frequent issue developers used to get during React application development.

What does the issue mean?

For example, Let’s declare a button in HTML, This works in HTML but a semantic issue as

<input type="submit">Save</input>

The same line causes these errors/warnings in React render JSX code, Input is a self-closing tag and no children inside the closing tag. So save label is not allowed inside it.

In the same way, We can rewrite in react as follows

<input type="submit" value="Save" />

Not only for input tags, but Buttons also can be an issue in react

<button type="submit">Update</button>

The above can be rewritten using the value attribute.

<button type="submit" value="Update" />

For example in Input text types

As you see below, the Input tag contains a div which is not allowed, So, react throws a warning.

<input type=text onChange={changeEvent} >
  <div className="tooltip">
This is email text box
 </div>
</input>;

Instead, the Same can be rewritten as below

<input type="text" onChange="{changeEvent}" />;

#Conclusion

Ad input fields in Reacts are self-closing elements, These can not contain children’s or nested content.

And also explained

• Buttons labels are moved from inside tag to attribute value
• Labels inside the input tag are not allowed.