react-application.js

app.js

import React, { useState } from 'react';

export default function App({ data }) {
  const [ text, setText ] = useState(data.isChecked);
  const [ error, setError ] = useState(null);
  const [ isSuccess, setIsSuccess ] = useState(false);
  const [ inProgress, setInProgress ] = useState(false);
  
  function submitForm() {
    setIsSuccess(false);
    setInProgress(true);
    window.fetch('/send', {
      body: { text }
    }).then(response => {
      if (response.status !== 200) {
          throw new Error(`Failed!`);
      }
      return response.json();
    }).then(
      data => {
        setInProgress(false);
        setIsSuccess(true);
      },
      error => {
        setInProgress(false);
        setError(error);
      }
    );
  }
  
  return (
    <form onSubmit={event => {
      event.preventDefault();
      submitForm();
    }}>
      <input type={'text'} onChange={event => setText(event.target.value)} />
      <button>Send</button>
    </form>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '/app''

ReactDOM.render(
  document.getElementById('container'),
  <App isChecked={document.getElementById('container').dataset} />
);