menu
  • Register

input is a void element tag and must neither have `children` nor use `dangerouslysetinnerhtml`.

0 votes
1.5k views

Problem :

Facing following strange issue
input is a void element tag and must neither have `children` nor use `dangerouslysetinnerhtml`.
●6 ●5 ●3
6,930 points

1 Answer

0 votes

Solution :

As per the error input tag should not have any children, please take the label out off input closure tag

render() {
    let radioid = this.props.radioid;
    return (
        <div className="row">
        {this.props.options.map(function(option) {
            return (
            <div key={radioid} className="column">
                <label>{option}</label>
                <input type="radio" name={radioid} value={option}/>
            </div>
            );
        })}
        </div>
    );
}
●9 ●7 ●4
38,600 points

Related questions

0 votes
2 answers 102 views
102 views
If you meant to render a collection of children, use an array instead.
Problem : I am trying to learn React JS. I have written a code for component . I also have the data that I get from a Data Base, and whose current state (myDB) I dispatch.I am trying to use data from myDB object and then want to display some of the ... a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons How to fix this issue ?
asked Feb 22 mphil 2.3k points
0 votes
2 answers 228 views
228 views
Uncaught error: _registercomponent(...): target container is not a dom element.
Problem : I often face below error after making the trivial React example page: &ldquo;Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.&rdquo; Below is my code: /** The @jsx React.DOM */ 'use strict'; var MyReact = require('react'); ... > <head>  <script src="/mybundle.js"></script> </head> <body> </body> </html> What does the above error mean?
asked Jan 7 alecxe 7.5k points
0 votes
2 answers 559 views
559 views
Error: actions must be plain objects. use custom middleware for async actions.
Problem : Facing below error: Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions. I wanted to add comments with all posts. So when fetch posts are run I want to call fetch comment API for every post. export function ... API.fetchComments(postAllId).then(comments => {     return {       type: BIND_COMMENTS,       comments,       posAlltId     }  }) }
asked Jan 17 jwilliam 3.9k points
1 vote
1 answer 34 views
34 views
Each child in an array or iterator should have a unique "key" prop.
Problem : I am very new to ruby-on-rails and reactjs. I have recently joined a new project. If I try to iterate through my variable mybadges and try to display each badge then I face below error : Each child in an array or iterator should have a unique "key" prop. ... error but was unable to fix it. So now I am looking for ruby-on-rails and reactjs expert who can help me in fixing above error.
asked May 4 stewart 4k points
0 votes
2 answers 79 views
79 views
Typeerror: super expression must either be null or a function, not undefined
Problem : I am using the reactjs. When I run my code below my browser says: Uncaught TypeError: Super expression must either be null or a function, not undefined Any clues at all as to what is wrong with my code? First the line used to compile the code as below : ... var React = require('react'); class HelloMessage extends React.Component {   render() {     return <div>Hello World</div>;   } }
asked Jan 23 jwilliam 3.9k points
Dark theme