sémantique-ui-réagir Erreur de syntaxe: éléments adjacents JSX doivent être enveloppés dans une balise englobante

Question

J'utilise sémantico-ui-REACT pour construire une forme pour un nouvel utilisateur:

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; 

Quand je construis I recevoir cette erreur:

./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> 

J'ai googlé autour et pour autant que je peux dire que je joins mon élément JSX dans un div. J'ai utilisé des composants sémantique-ui-réagir dans d'autres parties de mon application sans erreur, je ne sais pas pourquoi la construction est suspendue sur ce point.

Une aide précieuse serait grandement appréciée. Je vous remercie.

Answer 1

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

devrait être

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