Set default value for select if `select` is inserted-CodePudding

I have a form with fields. If RiskType field is ILI and at the same time 'Limit Type' field is I or Y, then The Settlement drop down list is inserted my question is how to make the netSettlement variable set value the first option in select. If this form has been inserted in the DOM (logically, if the form is not inserted, the value is not set)

    {(riskType === 'ILI' && (limitType === 'Y' || limitType === 'I')) &&
      <Form.Row>
        <Form.Group controlId='formGridNetSettlement'>
          <Form.Label>Settlement</Form.Label>
          <Form.Control name='netSettlement' as='select' value={netSettlement}
                        onChange={e => {setNetSettlement(e.currentTarget.value)} }
                        required={!isSearch}>
            <option>True</option>
            <option>False</option>
          </Form.Control>
        </Form.Group>
      </Form.Row>
    }

CodePudding user response：

You'll want to add the selected attribute to the option that you want pre-selected when the form is loaded:

<option selected value="true">True</option>
<option value="false">False</option>

Also, you will want to set the value attribute with the actual value you want to submit.

CodePudding user response：

You do not have values in options at all. If you're receiving Boolean value for netSettlement try this

{
  riskType === "ILI" && (limitType === "Y" || limitType === "I") && (
    <Form.Row>
      <Form.Group controlId="formGridNetSettlement">
        <Form.Label>Settlement</Form.Label>
        <Form.Control
          name="netSettlement"
          as="select"
          value={netSettlement.toString()}
          onChange={(e) => {
            setNetSettlement(e.currentTarget.value);
          }}
          required={!isSearch}
        >
          <option value="true">True</option>
          <option value="false">False</option>
        </Form.Control>
      </Form.Group>
    </Form.Row>
  );
}