pokemon.trade/app/javascript/packs/frontend/components/pages/pokemon/Create.tsx

import React, {useState} from 'react';
import {Form, Button} from 'react-bootstrap';
import environment from '../../../graphqlEnvironment';
import {createPokemon} from './CreatePokemon';

function onSubmit(e: Event, nickname: string, pokedexNumber: number): void {
  e.preventDefault();
  createPokemon(environment, nickname, pokedexNumber);
}

const Create: React.FC<void> = (): React.ReactElement<void> => {
  const [nickname, setNickname] = useState('');
  const [pokedexNumber, setPokedexNumber] = useState(1);

  return (
    <Form onSubmit={e => onSubmit(e, nickname, pokedexNumber)}>
      <Form.Group controlId='nickname'>
        <Form.Label>Nickname</Form.Label>
        <Form.Control onChange={e => setNickname(e.target.value)} placeholder='Pokemon Nickname' />
      </Form.Group>

      <Form.Group controlId='pokedexNumber'>
        <Form.Label>National Pokedex Number</Form.Label>
        <Form.Control
          max={809}
          min={1}
          onChange={e => setPokedexNumber(e.target.value)}
          placeholder='Nation Pokedex Number'
          type='number'
        />
      </Form.Group>
      <Button type='submit' variant='primary'>
        Submit
      </Button>
    </Form>
  );
};

export default Create;