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


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

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

Void elements in HTMl are self closing tags which don’t haave any content, Examples are ,,

This is an frequent issue developer used to get during React application development.

What the issue means?

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

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

The same line causes an these error/warning in React render jsx code, Input is self closing tag and no children’s inside 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, Buttons also can be an issue in react

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

The above can be rewritten using value attribute

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

For example in Input text types

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

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

Instead, Same can be rewritten as below

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

Conclusion

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

And also explained

  • Buttons labels are moved from inside tag to attribute value
  • Labels inside input tag are not allwed.
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.