Invalid value for prop `value` on <input> tag

user_1874080 0
Viewed 21716

I am getting this warning that I can not resolve:

Invalid value for prop value on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details

The following is the code I am using:

<FormItem validateStatus={NameError ? "error" : ""} help={NameError || ""}>
  {getFieldDecorator("Name", {
    initialValue: (()=>{this.state.Data.Name}),
    rules: [{ required: true, message: "Please input the component name!" }]
  })(
    <Input
      className="form-control"
      type="text"
      name="Name"
      defaultValue={this.state.Data.Name}
      onChange={this.onChange}
    />
  )}
</FormItem>

My typescript interfaces look like this:

export interface IFieldEdition{
    Data:IFieldData
}

export interface IFieldData{
    Id?:number,
    Name?:string,
    Value?:string,
    Description?:string,
    CreatedDate?:Date,
    CreatedBy?:string,
    StatusId?: number
}

How can I resolve this? Any clue?

antd reactjs
3 Answers

I see you're using antd forms. From antd form official document:

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls，the flow of form data will be handled by Form which will cause:

You shouldn't call setState manually, please use this.props.form.setFieldsValue to change value programmatically.

Your use of initialValue: (()=>{this.state.Data.Name}, which calls setState might be the reason you're getting this error.

user_85636420

Not sure how that getFieldDecorator works, but seems to be that the problem might be you're passing a function as the initialValue prop.

Try replacing initialValue: (()=>{this.state.Data.Name}) with initialValue: this.state.Data.Name

user_34240110

I've seen this error while making an form with input, in my case the solution was very simple:

<input 
    type="text" 
    value={this.state.term} 
    onChange={(e) => this.setState({ term: e.target.value.toLocaleUpperCase() })}
/>

What happened was that I simply forgot to call the method and had it like this:

toLocaleUpperCase

So, don't forget the parentheses at the end of any function call. Hope this helps.

user_74432870
Related