Form.js — react Source File

Architecture documentation for Form.js, a javascript file in the react codebase. 4 imports, 1 dependents.

File javascript BabelCompiler Entrypoint 4 imports 1 dependents 2 functions

Entity Profile

BabelCompiler→ Entrypoint→ Form.js — react Source File

Dependency Diagram

graph LR
  dcf1b254_c429_16d7_1424_96bb51b3b171["Form.js"]
  a0b98e8f_be9f_23db_e6ce_8f9a041223a2["ErrorBoundary.js"]
  dcf1b254_c429_16d7_1424_96bb51b3b171 --> a0b98e8f_be9f_23db_e6ce_8f9a041223a2
  9ee6daf6_99cf_7974_5b8e_3c395c9b9c45["ErrorBoundary"]
  dcf1b254_c429_16d7_1424_96bb51b3b171 --> 9ee6daf6_99cf_7974_5b8e_3c395c9b9c45
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  dcf1b254_c429_16d7_1424_96bb51b3b171 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  4d0c4ccc_5970_e7f9_458f_15f0290099b1["react-dom"]
  dcf1b254_c429_16d7_1424_96bb51b3b171 --> 4d0c4ccc_5970_e7f9_458f_15f0290099b1
  b27c3f66_c90d_ed18_3ae4_582f9ff3b4e6["App.js"]
  b27c3f66_c90d_ed18_3ae4_582f9ff3b4e6 --> dcf1b254_c429_16d7_1424_96bb51b3b171
  style dcf1b254_c429_16d7_1424_96bb51b3b171 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

'use client';

import * as React from 'react';
import {useFormStatus} from 'react-dom';
import ErrorBoundary from './ErrorBoundary.js';

function Status() {
  const {pending} = useFormStatus();
  return pending ? 'Saving...' : null;
}

export default function Form({action, children}) {
  const [isPending, setIsPending] = React.useState(false);

  return (
    <ErrorBoundary>
      <form action={action}>
        <label>
          Name: <input name="name" />
        </label>
        <label>
          File: <input type="file" name="file" />
        </label>
        <button>Say Hi</button>
        <Status />
      </form>
    </ErrorBoundary>
  );
}