How to pass a default value to an input in React (using props)

Question

I have this Field that renders an Input component RenderInput. I need to pass a default value to it, something like value="100".

      <Field
        name="hours"
        type="number"
        placeholder="Ingrese las horas para esta categoría"
        component={RenderInput}
        onChange={(event) => {
          handleSubmit(currentValues => this.debounceSubmitProduction({
            ...currentValues,
            hours: event.target.value,
          }))();
        }}
      />

This is the RenderInput component:

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
}) => (
  <div>
    <input
      {...input}
      type={type}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      className={`font-300 ${touched && error && 'has-error'}`}
      onKeyDown={onKeyDown}
      ref={innerRef}
    />
  </div>
);

If I put value="100" inside the RenderInput component, it works fine, but If I try to pass that value as a props to the RenderInput component, it doesn't work. How can I pass the property value from <Field /> to RenderInput?

Roy J · Accepted Answer · 2018-04-25 19:00:14Z

6

https://reactjs.org/docs/uncontrolled-components.html#default-values

With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.

answered Apr 25, 2018 at 19:00

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

1 Comment

MEnf Over a year ago

To piggyback on this answer: Only use the defaultValue attribute if you don't want the user to control the state of the input. If they're going to be making changes to the input use the value attribute instead. This will make the input controlled and will be updated via a setState function that you pass from your parent component to the Field component.

Milos Mosovsky · Accepted Answer · 2018-04-25 19:36:25Z

1

Well you have several options and your question is wrong as default value is done via defaultProps but what you can do is

<Field
        name="hours"
        type="number"
        placeholder="Ingrese las horas para esta categoría"
        component={() => (<RenderInput input={{ value: 100 }}/> )}
        onChange={(event) => {
          handleSubmit(currentValues => this.debounceSubmitProduction({
            ...currentValues,
            hours: event.target.value,
          }))();
        }}
      />

please pay attention how it's destructured inside RenderInput

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
}) => (

this means anything passed on input key will be destructured as prop to input, so if you need to send value you have to do input={{value: 100}} instead of value=100 this prop is not destructured.

If you want to have default value, you can just add static to RenderInput

RenderInput.defaultProps = {
  input: { value: 100 }
}

EDIT

There is alsoclone function

const ComponentWithProps = React.CloneElement(RenderInput, { props })

or

edited Apr 25, 2018 at 19:36

answered Apr 25, 2018 at 19:02

Milos Mosovsky

3,0031 gold badge18 silver badges18 bronze badges

3 Comments

Lizz Parody Over a year ago

I want the default value to be empty string, but when I pass the props with a default value, to show that value. I tried this but it didn't work :(

Lizz Parody Over a year ago

The error is: Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null

Milos Mosovsky Over a year ago

You can setup default values on component with static defaultProps = {} and on stateless components (which you have on render input) same as I stated above, RenderInput.defaultProps = { input: { value: 100 } } unless you will provide full example on stackblitz.com the uncaught error is probably unrelated to the question which you've asked

Liam · Accepted Answer · 2018-04-25 19:45:16Z

1

  <Field
    name="hours"
    type="number"
    someValue='100'
    placeholder="Ingrese las horas para esta categoría"
    component={RenderInput}
    onChange={(event) => {
      handleSubmit(currentValues => this.debounceSubmitProduction({
        ...currentValues,
        hours: event.target.value,
      }))();
    }}
  />

Then

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
  someValue
}) => (
  <div>
    <input
      {...input}
      type={type}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      className={`font-300 ${touched && error && 'has-error'}`}
      onKeyDown={onKeyDown}
      ref={innerRef}
      defaultValue={someValue}
    />
  </div>
);

edited Apr 25, 2018 at 19:45

answered Apr 25, 2018 at 19:09

Liam

6,8037 gold badges28 silver badges48 bronze badges

3 Comments

Lizz Parody Over a year ago

This is what I tried before, with value and with defaultValue but none of them worked :(

Liam Over a year ago

Well Did you get any error in console? as well answer updated

Lizz Parody Over a year ago

The errror is: Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null

Collectives™ on Stack Overflow

How to pass a default value to an input in React (using props)

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related