Trouble passing React prop to DOM element

Question

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 }
              />
        }

>having it passed from react <- May I ask what the problem is and a message if an error occurs? — dance2die, Sep 28 '18 at 14:47

score 2 · Answer 1 · answered Sep 28 '18 at 14:59

2

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

<TransparentInput
  autoFocus
  type="number"

answered Sep 28 '18 at 14:59

Ted

14,757
2
41
58

score 1 · Answer 2 · answered Sep 28 '18 at 14:54

1

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

answered Sep 28 '18 at 14:54

Lumpenstein

1,250
1
10
27

Trouble passing React prop to DOM element

2 Answers2