CODEWITHSUNDEEP
javascriptreactjsreact-native
Curtis
Curtis

Reputation: 2704

Add span after input using ReactDOM

I'm trying to create an inline radio/text/input form using ReactDOM for React 15, however I'm getting an error when opening my browser:

Uncaught Invariant Violation: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

The code I'm attempting to use that's throwing this error is as follows:

const D = ReactDOM; //react-dom-factories

D.input({
    type: 'radio',
    className: 'stra-on-loss-return-to-base-radio',
    value: 'return_to_base',
    disabled: this.state.active
},  D.span(null, 'Return to base bet'), D.br()),
D.input({
    type: 'radio',
    className: 'stra-on-loss-increase-bet-by',
    value: 'increase_bet_by',
    disabled: this.state.active
},  D.span(null, 'Increase bet by: '), D.input({
    type: 'text',
    ref: 'onLossQty',
    onChange: this.updateOnLossQty,
    value: this.state.onLossIncreaseQty,
    disabled: this.state.active || this.state.onLossSelectedOpt !== 'increase_bet_by' }
), D.span(null, 'x'))

https://www.npmjs.com/package/react-dom-factories is ReactDOM in the question https://pastebin.com/51x23vZy is a copy of the entire file.

Upvotes: 2

Views: 851

Answers (2)

Andy
Andy

Reputation: 8692

That error is saying you can't put children inside an input element. You're passing D.span and D.br arguments as children, in other words you're trying to render this (first half of your example):

<input type="radio">
  <span>
    Return to base bet
  </span>
  <br />
</input>

HTML doesn't allow <input> to have children anyway so React is telling you it's an error. So you'll need to put the input, span, and br inside a div:

D.div(
  null,
  D.input({
    type: 'radio',
    ...
  }),
  D.span(null, 'Return to base bet'),
  D.br()
)

The corresponding HTML looks like

<div>
  <input type="radio" />
  <span>
    Return to base bet
  </span>
  <br />
</div>

Or if you don't want a parent div or span you could wrap them in a React.Fragment.

Upvotes: 2

SeeThruHead
SeeThruHead

Reputation: 41

the file is using the reactDOM component factories. These factories (IIRC) are a wrapper for preconfigured 

React.createElement(component, props, ...children)

calls so

D.input({
  type: 'radio',
  className: 'stra-on-loss-return-to-base-radio',
  value: 'return_to_base',
  disabled: this.state.active
},  D.span(null, 'Return to base bet'), D.br()),

D.span(null, 'Return to base bet'), D.br() being passed to D.input is actually mapped to the ...children arguments in react.createElement

the problem is you cannot pass children to elements like input and img hence your error

Upvotes: 2

Related Questions