Why PyCharm displays errors in this code? (React)

Question

I am learning react.js right now. I have a plugin for it, so pycharm shoul support JSX. But when I am trying to code in it, i always get tons of errors (checked for 100 times, my code is correct). What should i do or is my code correct?

Registration.js

import React from 'react'
import CryptoJS from 'crypto-js'
export class App extends React.component {
        function send () {
        const form = {
            email: document.getElementById('EmailInput').value,
            username: document.getElementById('UsernameInput').value,
            password: CryptoJS.MD5.encrypt(document.getElementById('PasswordInput').value),
            emailSpam: document.getElementById('checkEmailSpam').checked
        }
        fetch('register', {method: 'POST', body: JSON.stringify(form)})
            .then(data => data.json())
        alert('На ваш E-mail было выслано письмо с сcылкой для завершения регистрации. Все инструкции в письме.')
    }

    render() {
        return (
            <div id="loginForm" className="card mt-5" style="width: 40vh; background-color: #F6F8FA">
                <form style="text-align: left">
                    <div className="mb-3 mt-3 ms-3 me-3">
                        <label htmlFor="EmailInput" className="form-label">E-mail</label>
                        <input type="email" className="form-control" id="EmailInput" placeholder="E-mail">
                    </div>
                    <div className="mb-3 mt-3 ms-3 me-3">
                        <label htmlFor="UsernameInput" className="form-label">Отображаемое имя</label>
                        <input type="text" className="form-control" id="UsernameInput" placeholder="Никнейм">
                    </div>
                    <div className="mb-3 ms-3 me-3">
                        <label htmlFor="PasswordInput" className="form-label">Пароль</label>
                        <input type="password" className="form-control" id="PasswordInput" placeholder="Пароль">
                    </div>
                    <div className="form-check mb-3 ms-3 me-3">
                        <input type="checkbox" className="form-check-input" value="" id="checkEmailSpam" checked>
                            <label htmlFor="checkEmailSpam" className="form-check-label">
                                Желаете ли вы получать новости Фонда МультиСны на корпоративную почту?
                            </label>
                    </div>
                    <div className="d-grid gap-2 col-6 mx-auto">
                        <button className="btn btn-success mb-3 mt-2" type="button" style="background-color: #44c96b"
                                onClick="send()">Зарегестрироваться
                        </button>
                    </div>
                </form>
            </div>
        )
    }
}

Errors are smth like It's smth like :statement excpected" or "} expected, but they are there

Answer 1

1. You can't use function keyword inside class body so:
2. You have to close <input /> tags in jsx

import React from "react";
import CryptoJS from "crypto-js";
export class App extends React.component {
  send() {
    const form = {
      email: document.getElementById("EmailInput").value,
      username: document.getElementById("UsernameInput").value,
      password: CryptoJS.MD5.encrypt(
        document.getElementById("PasswordInput").value
      ),
      emailSpam: document.getElementById("checkEmailSpam").checked,
    };
    fetch("register", { method: "POST", body: JSON.stringify(form) }).then(
      (data) => data.json()
    );
    alert(
      "На ваш E-mail было выслано письмо с сcылкой для завершения регистрации. Все инструкции в письме."
    );
  }

  render() {
    return (
      <div
        id="loginForm"
        className="card mt-5"
        style="width: 40vh; background-color: #F6F8FA"
      >
        <form style="text-align: left">
          <div className="mb-3 mt-3 ms-3 me-3">
            <label htmlFor="EmailInput" className="form-label">
              E-mail
            </label>
            <input
              type="email"
              className="form-control"
              id="EmailInput"
              placeholder="E-mail"
            />
          </div>
          <div className="mb-3 mt-3 ms-3 me-3">
            <label htmlFor="UsernameInput" className="form-label">
              Отображаемое имя
            </label>
            <input
              type="text"
              className="form-control"
              id="UsernameInput"
              placeholder="Никнейм"
            />
          </div>
          <div className="mb-3 ms-3 me-3">
            <label htmlFor="PasswordInput" className="form-label">
              Пароль
            </label>
            <input
              type="password"
              className="form-control"
              id="PasswordInput"
              placeholder="Пароль"
            />
          </div>
          <div className="form-check mb-3 ms-3 me-3">
            <input
              type="checkbox"
              className="form-check-input"
              value=""
              id="checkEmailSpam"
              checked
            />
            <label htmlFor="checkEmailSpam" className="form-check-label">
              Желаете ли вы получать новости Фонда МультиСны на корпоративную
              почту?
            </label>
          </div>
          <div className="d-grid gap-2 col-6 mx-auto">
            <button
              className="btn btn-success mb-3 mt-2"
              type="button"
              style="background-color: #44c96b"
              onClick="send()"
            >
              Зарегестрироваться
            </button>
          </div>
        </form>
      </div>
    );
  }
}