React radio input issue

Question

I am trying to render the following JSX code. When I add the 'Yes' and 'No' text to complement the radio buttons, I get the following error...

 <tr>
    <td>Do you want the questions displayed in a random order?</td>
    <td><input type="radio" name="random">Yes</input></td>
    <td><input type="radio" name="random">No</input></td>
 </tr>

Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

What am I doing wrong?

As a side note, the <table> element is used to represent tabular data. What you have here isn't tabular data. — James Donnelly
– James Donnelly, Commented Nov 17, 2016 at 16:39
I'm just trying to get a bunch of questions lined up in rows and columns for text questions and then inputs. Would you recommend using a bunch of div tags in the place of a table, or some other method? — nikotromus
– nikotromus, Commented Nov 17, 2016 at 19:21

Rami Enbashi · Accepted Answer · 2016-11-17 16:40:45Z

3

Use label

<label for="yes">Yes</label>
<input type="radio" id="yes" name="random"/>

answered Nov 17, 2016 at 16:40

Rami Enbashi

3,5561 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nikotromus Over a year ago

using a label works, but I get the following warning: "warning.js?0260:36 Warning: Unknown DOM property for. Did you mean htmlFor?"

nikotromus Over a year ago

This sheds some light on the issue, in case anyone cares. Apparently, the 'for' keyword is a no-no for the React DOM... stackoverflow.com/questions/22752116/react-label-element

Collectives™ on Stack Overflow

React radio input issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related