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
  427ce39f_dbe6_0025_36a9_def9ad6283ce["Form.js"]
  a595a180_8a71_e4db_574e_528cf2694d32["ErrorBoundary.js"]
  427ce39f_dbe6_0025_36a9_def9ad6283ce --> a595a180_8a71_e4db_574e_528cf2694d32
  8732d52d_5060_60c1_05ce_86cacb9a7509["ErrorBoundary"]
  427ce39f_dbe6_0025_36a9_def9ad6283ce --> 8732d52d_5060_60c1_05ce_86cacb9a7509
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  427ce39f_dbe6_0025_36a9_def9ad6283ce --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  4d0c4ccc_5970_e7f9_458f_15f0290099b1["react-dom"]
  427ce39f_dbe6_0025_36a9_def9ad6283ce --> 4d0c4ccc_5970_e7f9_458f_15f0290099b1
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f["App.js"]
  eef5c2d6_5cd1_257d_9f3d_8561e1cce25f --> 427ce39f_dbe6_0025_36a9_def9ad6283ce
  style 427ce39f_dbe6_0025_36a9_def9ad6283ce 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';

const h = React.createElement;

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

export default function Form({action, children}) {
  const [isPending, setIsPending] = React.useState(false);
  return h(
    ErrorBoundary,
    null,
    h(
      'form',
      {
        action: action,
      },
      h(
        'label',
        {},
        'Name: ',
        h('input', {
          name: 'name',
        })
      ),
      h(
        'label',
        {},
        'File: ',
        h('input', {
          type: 'file',
          name: 'file',
        })
      ),
      h('button', {}, 'Say Hi'),
      h(Status, {})
    )
  );
}