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 ,,

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.