CODEWITHSUNDEEP
javascripthtmlreactjsreact-templates
RagePwn
RagePwn

Reputation: 421

Trouble passing React prop to DOM element

I'm trying to restrict an input to integers. I'm trying to pass the step attribute which seems to work when used directly in HTML, but am having a hard time getting having it passed from react. Below is my render method, and the numeric input is down at the bottom. The problem I'm having is the input is still accepting decimal.

render() {
    const {
      currentVariableValue,
      type,
      currentVariable,
      variablePayload,
    } = this.props

    const lowHi = this.getLowHi()
    const lowHiDisplay = `between ${lowHi[0]} and ${lowHi[1]}`
    /* eslint-disable no-nested-ternary */
    return (
      <ResponseContainer>
        {
          type === 'text' ?
            <TransparentTextArea
              autoFocus
              type="text"
              value={ currentVariableValue }
              onChange={ this.handleUpdateValue }
              onFocus={ this.handleFocus }
              onKeyPress={ this.handleKeyPress }
              key={ currentVariable }
            /> :
            type === 'paragraph' ?
              <TransparentTextArea
                autoFocus
                type="text"
                value={ currentVariableValue }
                onChange={ this.handleUpdateValue }
                onFocus={ this.handleFocus }
                onKeyPress={ this.handleKeyPress }
                key={ currentVariable }
                style={ { height: '300px', width: '95%', fontSize: '1.4em' } }
              /> :
              <TransparentInput
                autoFocus
                type="numeric"
                value={ currentVariableValue }
                onChange={ this.handleUpdateValue }
                onFocus={ this.handleFocus }
                onKeyPress={ this.handleKeyPress }
                key={ currentVariable }
                invalid={ !variablePayload.isValid }
                step={ 1 }
              />
        }

Upvotes: 0

Views: 46

Answers (2)

Ted
Ted

Reputation: 14927

The error is in your type prop. Change it to number. Like:

<TransparentInput
  autoFocus
  type="number"

Upvotes: 2

Ruckert Solutions
Ruckert Solutions

Reputation: 1301

In your TransparentInput do you pass {...props} to the input element ?

Upvotes: 1

Related Questions