JSX adjacent on react.js

Question

the code below is divided into two parts one deals with the management of the head the other "body" when I execute the code the exception below is raised, how can I solve the error? I can't figure out what the error below is due to, the error is on the parsing of react

Error:

  Line 48:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

         <Link rel="stylesheet" type="text/css" href="css/main.css" />
     </HeadProvider>

Code:

import * as React from 'react';
import { Button, Form, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import logo from './logo.svg';
import { HeadProvider, Title, Link, Meta } from 'react-head';

import './Home.css';

class Home extends Component {
  ...

  render() {
    return (
      <HeadProvider>
        <Meta charset="UTF-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
        <Link rel="icon" type="image/png" href="images/icons/favicon.ico" />
        <Link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
        <Link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" />
        <Link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/animate/animate.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css" />
        <Link rel="stylesheet" type="text/css" href="css/util.css" />
        <Link rel="stylesheet" type="text/css" href="css/main.css" />
      </HeadProvider>
        <div className="Login">
          <Form onSubmit={this.handleSubmit}>
            <Form.Group controlId="email" bsSize="large">
              <label> Email: </label>
              <Form.Control
                autoFocus
                type="email"
                value={this.state.email}
                onChange={this.handleChange}
              />

            </Form.Group>
            <br></br>
            <Form.Group controlId="password" bsSize="large">
              <label> Password: </label>
              <Form.Control
                value={this.state.password}
                onChange={this.handleChange}
                type="password"
              />
            </Form.Group>
            <Button
              block
              bsSize="large"
              disabled={!this.validateForm()}
              type="submit"
            >
              Login
              </Button>
          </Form>
        </div>
    );
  }
}

export default Home;

Answer 1

You need to wrap all your render into something, for exemple a Fragment or a div

return (
      <Fragment>
      <HeadProvider>
        <Meta charset="UTF-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
        <Link rel="icon" type="image/png" href="images/icons/favicon.ico" />
        <Link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
        <Link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" />
        <Link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/animate/animate.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css" />
        <Link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css" />
        <Link rel="stylesheet" type="text/css" href="css/util.css" />
        <Link rel="stylesheet" type="text/css" href="css/main.css" />
      </HeadProvider>
        <div className="Login">
          <Form onSubmit={this.handleSubmit}>
            <Form.Group controlId="email" bsSize="large">
              <label> Email: </label>
              <Form.Control
                autoFocus
                type="email"
                value={this.state.email}
                onChange={this.handleChange}
              />

            </Form.Group>
            <br></br>
            <Form.Group controlId="password" bsSize="large">
              <label> Password: </label>
              <Form.Control
                value={this.state.password}
                onChange={this.handleChange}
                type="password"
              />
            </Form.Group>
            <Button
              block
              bsSize="large"
              disabled={!this.validateForm()}
              type="submit"
            >
              Login
              </Button>
          </Form>
        </div>
        </Fragment>
    );

Answer 2

You are trying to return multiple elements from render function. You must return only one element. You can fix this by wrapping your <HeadProvider> and <div className="Login"> in parent div or in React.Fragment:

render() {
    return (
        <React.Fragment>
            <HeadProvider>
                <Meta charset="UTF-8"/>
                <Meta name="viewport" content="width=device-width, initial-scale=1"/>
                <Link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/bootstrap/css/bootstrap.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="fonts/iconic/css/material-design-iconic-font.min.css"/>
                <Link rel="stylesheet" type="text/css" href="vendor/animate/animate.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/css-hamburgers/hamburgers.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/animsition/css/animsition.min.css"/>
                <Link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css"/>
                <Link rel="stylesheet" type="text/css"
                      href="vendor/daterangepicker/daterangepicker.css"/>
                <Link rel="stylesheet" type="text/css" href="css/util.css"/>
                <Link rel="stylesheet" type="text/css" href="css/main.css"/>
            </HeadProvider>
            <div className="Login">
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="email" bsSize="large">
                        <label> Email: </label>
                        <Form.Control
                            autoFocus
                            type="email"
                            value={this.state.email}
                            onChange={this.handleChange}
                        />

                    </Form.Group>
                    <br></br>
                    <Form.Group controlId="password" bsSize="large">
                        <label> Password: </label>
                        <Form.Control
                            value={this.state.password}
                            onChange={this.handleChange}
                            type="password"
                        />
                    </Form.Group>
                    <Button
                        block
                        bsSize="large"
                        disabled={!this.validateForm()}
                        type="submit"
                    >
                        Login
                    </Button>
                </Form>
            </div>
        </React.Fragment>
    );
}