3

I'm getting this warning with my JS React Bootstrap code.

Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

My code is working exactly as intended, so the warning isn't causing any functionality issues, but still, I'd like to resolve it.

Here's the code that's causing the warning:

<View style={{flexDirection: "row"}}>
  <View style={{flex: 1}}>
    <Form.Group>
      <Form.Label>Availability</Form.Label>
      <div onChange={ (e) => this.handleInput(e, "listing")}>
        <Form.Check checked={(this.state.listing.availability === "募集中")} type="radio" value="募集中" name="availability" label="募集中"/>
        <Form.Check checked={(this.state.listing.availability === "契約済")} type="radio" value="契約済" name="availability" label="契約済"/>
      </div>
    </Form.Group>
  </View>
  <View style={{flex: 1.1}}>
    <Form.Group>
      <Form.Label>Property Type</Form.Label>
      <div onChange={ (e) => this.handleInput(e, "property")}>
        <Form.Check checked={(this.state.property.property_type === "一戸建て")} type="radio" value="一戸建て" name="property_type" label="一戸建て"/>
        <Form.Check checked={(this.state.property.property_type === "アパート")} type="radio" value="アパート" name="property_type" label="アパート"/>
      </div>
    </Form.Group>
  </View>
  <View style={{flex: 0.9}}>
    <Form.Group>
      <Form.Label>Interest</Form.Label>
      <div onChange={ (e) => this.handleInput(e, "property")}>
        <Form.Check checked={(this.state.property.interest === "Extremely")} type="radio" value="Extremely" name="interest" label="Extremely"/>
        <Form.Check checked={(this.state.property.interest === "Kinda")} type="radio" value="Kinda" name="interest" label="Kinda"/>
        <Form.Check checked={(this.state.property.interest === "Nah")} type="radio" value="Nah" name="interest" label="Nah"/>
      </div>
    </Form.Group>
  </View>
 </View>

I have certain reasons for formatting things this way, but I'm totally open to suggestions. Really, I just want get rid of the warning with changing this code as little as possible.

I saw there were other questions addressing this issue, but I couldn't find a solution that works with my code.

mwsmws22
  • 127
  • 2
  • 11

2 Answers2

1

The warning message seems pretty clear. If you want it to disappear then you should add readOnly attribute to the Form.Check components.

<Form.Check checked={(this.state.listing.availability === "募集中")} type="radio" value="募集中" name="availability" label="募集中" readOnly/>
Risan
  • 38
  • 8
0

This worked fine for me: I had the following code that gave me the similar error:

  <input
  type="radio"
  className="tabs__radio"
  name="tabs-example"
  id="tab1"
  checked    **solution: just change checked to defaultChecked**
  />
Prateek Sharma
  • 1
  • 1