Facing issue while adding radio button in react - input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

Question

Input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

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

For example options is a list of elements like A, B, C, D

Answer 1

You get the error coz in input tag in jsx should be self closing, so after return always jsx script should write.

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>
    );
}

Answer 2

Thanks very much! I solved.

I have 2 tags "input", a type text and button but just the first didn't worked.

<input type="text" onChange={(event)=>{this.setState({coinAvalue:event.target.value})}}> <input type="button" value="Converter"onClick={this.converter}>

Answer 3

You should use a self-closing input tag like:

<input className="card-field-input" placeholder="text"/>

Answer 4

HTML elements such as <area />, <br />, and <input /> are void elements which are only self-closing without any content.

Therefore, React will throw an exception if you set either children or dangerouslySetInnerHTML prop for a void element.

So, instead of writing this as

<div key={radioid} className="column">
   <input type="radio" name={radioid} value={option}>
      <label>{option}</label>
   </input>
</div>

write it like this:

<div key={radioid} className="column">
   <input type="radio" name={radioid} value={option}/>
       <label>{option}</label>
</div>

Give a thumbs up if you like this answer.