'Parsing error: JSX element 'ValidatedForm' has no corresponding closing tag

I noticed that when I use more Rows and Cols to create a suitable UI for form validations, my validation does throw this error. The validation only captures data when it is within a Col tag .

It throws this error in my prettier terminal "JSX expressions must have one parent element". i.e the it must be within the Col tag

See the codes below for clarifications

      <Row>
      <Col sm={4}>
      {loading ? (
          <p>Loading...</p>
        ) : (
        <ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}>  {!isNew ?
     <ValidatedField name="id" required readOnly id="terminal-id" label="ID" validate={{ required: true }} /> : null}
      </Col>
      <Col sm={4}>
        <ValidatedField
          label="Stock Level Date"
          id="terminal-stockLevelDate"
          name="stockLevelDate"
          data-cy="stockLevelDate"
          type="date"
        />
        <ValidatedField
          label="Tank Threat Level"
          id="terminal-tankThreatLevel"
          name="tankThreatLevel"
          data-cy="tankThreatLevel"
          type="number"
        /></Col>
         </Row>
         <Row>
      <Col sm>
        <ValidatedField
          label="Low Pumpable Color"
          id="terminal-lowPumpableColor"
          name="lowPumpableColor"
          data-cy="lowPumpableColor"
          type="text"
        /></ValidatedForm>
          )}
      </Col></Row>

Can anyone enlighten me on another way around this.. And besides the Validation form indeed has a closing tag but it is not within the same Col

reactjs jhipster

Solution 1:^[1]

There is no closing tag for the ValidatedForm in this line

<Col sm={4}>
        <ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}/>
</Col>

The tree structure here is also messed up, you might want to fix that

  <Row>
      <Col sm>
        <ValidatedField
          label="Low Pumpable Color"
          id="terminal-lowPumpableColor"
          name="lowPumpableColor"
          data-cy="lowPumpableColor"
          type="text"
        />
      </Col></Row></ValidatedForm>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	pranit

'Parsing error: JSX element 'ValidatedForm' has no corresponding closing tag

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]