{

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





Related posts

Basic React Interview questions and answers

Best ways to add an element to an array in React state with examples

Difference between Development and Production Builds in React

Difference between pureComponent and component in React

Difference between super and super props in React constructor class?

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials