semantic-ui-react Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

Question

I'm using semantic-ui-react to build a form for a new user:

import React from 'react';
import { Form } from 'semantic-ui-react';
import {createUser} from '../../../actions/userAction';

class UserAddModalForm extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(event, props) {
    event.preventDefault();
    let body = {
        lastname: event.target.lastName.value,
        firstname: event.target.firstName.value,
        username: event.target.userName.value,
        email: event.target.email.value,
    }
    props.dispatch(createUser(body));
    props.onCancel();
  }

  render() {
    return(
      <div>
        <Form onSubmit={ (event) => this.handleSubmit(event, this.props)>
          <Form.Field>
            <label>Last Name</label>
            <input name='lastName' />
          </Form.Field>
          <Form.Field>
            <label>First Name</label>
            <input name='firstName' />
          </Form.Field>
          <Form.Field>
            <label>Username</label>
            <input name='userName' />
          </Form.Field>
          <Form.Field>
            <label>Email Address</label>
            <input name='email' />
          </Form.Field>
          <Button type='submit'>Submit</Button>
          <Button onClick={ this.props.onCancel }>Cancel</Button>
        </Form>
      </div>
    )
  }
}

export default UserAddModalForm;

When I build I receive this error:

./src/components/ui/users/UserAddModalForm.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (30:10)

  28 |             <input name='lastName' />
  29 |           </Form.Field>
> 30 |           <Form.Field>
     |           ^
  31 |             <label>First Name</label>
  32 |             <input name='firstName' />
  33 |           </Form.Field>

I've googled around and as far as I can tell I am enclosing my JSX element in a div. I've used semantic-ui-react components in other parts of my application with no error, I'm at a loss for why the build is hanging up on this.

Any and all help would be greatly appreciated. Thank you.

Answer 1

<Form onSubmit={ (event) => this.handleSubmit(event, this.props)>

应该

<Form onSubmit={ (event) => this.handleSubmit(event, this.props)}>