redux-form: Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `Knob`, expected `number`

I have a redux-form developed which has knob component(react-canvas-knob). I want some validation to apply for it but i get an error when i use {…input} props. If i dont use {…input} props i don’t get Failed prop type error but error occurred during validation cannot shown.

The problem to me is the use of {…input} props. Both knob component and DatePicker component has issue with it. Knob component has issue with Invalid prop value of type string supplied to Knob, expected number and DatePicker component has similar issue Invalid prop value of type string supplied to DatePicker, expected object.

const renderKnob1 = ({
                input,
                minValue,
                meta: { touched, error },
                handleMinChange,
            }) => (
        <div className="knob">
            <Knob
                value={input.value === '' ? minValue : input.value}
                onChange={handleMinChange}
                bgColor="#f3f3f4"
                width={110}
                height={110}
                fgColor="#1ab394"
                errorText={touched && error}
                {...input}
            />
        </div>
        );

const renderDate = ({ input, meta: { touched, error } }) => (
    <DatePicker
        hintText="pick a date"
        textFieldStyle={{ color: '#3333' }}
        hintStyle={{ color: '#3333' }}
        errorText={touched && error}
        value={input.value !== '' ? new Date(input.value) : null}
        {...input}
    />
);

<Field
     name="knob1"
     minValue={this.state.minValue}
     handleMinChange={this.handleMinChange}
     component={renderKnob1}
/>

<Field name="date" component={renderDate} autoOk />;

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16

Most upvoted comments

When you use {...input} it overrides the value prop you set before it. You need to do something like this:

<YourComponent
  someProps={someValue}
  {...input}
  value={yourValue}
/>

So the component will receive the value processed the way you want.

iyn on Oct 29, 2016

Yeah sure. Thanks. This is the most responsive community. I supremely appreciate your support.

Tushant on Oct 29, 2016

Oh, right! It seems that redux-form isn’t setting touched property of the Knob, like on regular inputs. I understand that the issues is solved? Can you please close it now?

iyn on Oct 29, 2016

You need to take care of displaying the error yourself in the Knob component. You’re passing errorText prop - this should be displayed in the component.

iyn on Oct 29, 2016