menu
  • Register

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

0 votes
2.3k 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

Please log in or register to answer this question.

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 235 views
235 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, 2020 mphil 2.3k points
0 votes
2 answers 301 views
301 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, 2020 alecxe 7.5k points
0 votes
2 answers 908 views
908 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, 2020 jwilliam 3.9k points
1 vote
1 answer 51 views
51 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, 2020 stewart 4k points
0 votes
2 answers 93 views
93 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, 2020 jwilliam 3.9k points
0 votes
1 answer 950 views
950 views
Uncaught typeerror: super expression must either be null or a function, not undefined
Problem : I am using the reactjs. When I try to run my code the browser says as below: Uncaught TypeError: Super expression must either be null or a function, not undefined The line used to compile my code: browserify -t reactify -t babelify examples/temp.jsx -o examples/public ... Component { render() { return <div>Hello World !! </div>; } } Does anyone have any idea on the solution for my issue?
asked Dec 7, 2019 alecxe 7.5k points
0 votes
1 answer 56 views
56 views
Neither the java_home nor the jre_home environment variable is defined
Problem : I am beginner to CentOS. I tried executing sudo ./startup.sh in my CentOS, But I am facing the below error: "Neither the JAVA_HOME nor the JRE_HOME environment variable is defined" I have already defined them in my bashrc as shown below: export JAVA_HOME=/home/mphil/New_learning/jdk1.8.0_212 export PATH=$JAVA_HOME/bin:$PATH How to fix this error?
asked Feb 27, 2020 mphil 2.3k points
0 votes
1 answer 193 views
193 views
because its mime type ('text/html') is not executable, and strict mime type checking is enabled
Problem : I am trying to use the reactrouter but i am getting following error because its mime type ('text/html') is not executable, and strict mime type checking is enabled
asked Nov 13, 2019 peterlaw 6.9k points
0 votes
0 answers 5 views
5 views
react get input value on button click
Problem: I want to know how can I get input field value on button click in react, I have a react class component that looks like this: var MyComponent = React.createClass({ handleClick: function() { if (this.refs.myInput !== null) { var input = this.refs.myInput; ... text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('container') );
asked 5 days ago khaled 160 points
0 votes
1 answer 37 views
37 views
Service worker termination by a timeout timer was canceled because devtools is attached.
Problem : I just launched my site and don't effectively do anything for a couple of seconds, and afterward the below indicated error message is produced in devTools. In the event that some procedure is done, the error doesn't emerge Service Worker termination by a timeout timer was ... Configuration: OS:- Windows 10 Pro webpack:- 1.14.0 sw-precache-webpack-plugin:- 0.9.1 sw-precache:- 5.0.0
asked Nov 29, 2019 alecxe 7.5k points
Dark theme