3

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?

nikotromus
  • 1,015
  • 16
  • 36
  • 1
    As a side note, the `` element is used to represent *tabular data*. What you have here **isn't** tabular data.
     – James Donnelly Nov 17 '16 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 Nov 17 '16 at 19:21

1 Answers1

3

Use label

<label for="yes">Yes</label>
<input type="radio" id="yes" name="random"/>
Rami Enbashi
  • 3,526
  • 1
  • 19
  • 21
  • using a label works, but I get the following warning: "warning.js?0260:36 Warning: Unknown DOM property for. Did you mean htmlFor?" – nikotromus Nov 17 '16 at 19:32
  • This sheds some light on the issue, in case anyone cares. Apparently, the 'for' keyword is a no-no for the React DOM... http://stackoverflow.com/questions/22752116/react-label-element – nikotromus Nov 18 '16 at 14:24