Блог

У меня ошибка с функцией, это код:

 import React, { useState } from "react";
import { CREATE_USER } from "../Graphql/Mutation";
import { useMutation } from "@apollo/client";

function CreateUser() {
    
  const [name, setName] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  const [createUser, { error }] = useMutation(CREATE_USER);

  return (
    <div className="createUser">
      <input
        type="text"
        placeholder="name"
        onChange={(event) => {
          setName(event.target.value);
        }}
      />
      <input
        type="text"
        placeholder="username"
        onChange={(event) => {
          setUserName(event.target.value);
        }}
      />
      <input
        type="text"
        placeholder="password"
        onChange={(event) => {
          setPassword(event.target.value);
        }}
      />
      <button
        onClick={() => {
          createUser({
            variables: {
              name: name,
              username: userName,
              password: password,
            },
          });
        }}
      >
        Create User
      </button>
    </div>
  );
}

export default CreateUser;
 

У меня возникла эта ошибка:

 Failed to compile
Unexpected token, expected "," (14:9)

  12 |
  13 |   return (
> 14 |     <div className="createUser">
     |          ^
  15 |       <input
  16 |         type="text"
  17 |         placeholder="name"
 

имя файла create.ts, так что вы знаете, что я делаю не так??

Я знаю, что форма для создания функции компонента выглядит так:

функция nameFunction(){ возврат(

…..что-то большее ) }

функция имени экспорта по умолчанию;

Я применяю это, но не работаю

Похоже, это просто проблема с именами. Файлы, использующие JSX с машинописным текстом, не могут иметь .ts расширения, потому что простые TS не справляются с этим. Переименование в create.tsx должно решить проблему =)