render() — react Function Reference

Architecture documentation for the render() function in Header.js from the react codebase.

Function javascript BabelCompiler Entrypoint calls 1 called by 1

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  9db0f7b9_610d_68bd_343a_4aedb4271a69["render()"]
  1c329cd9_c484_a7fb_a927_60fad9a4f574["Header"]
  9db0f7b9_610d_68bd_343a_4aedb4271a69 -->|defined in| 1c329cd9_c484_a7fb_a927_60fad9a4f574
  803321e0_2148_5caf_0e4e_ac9d7a2ce9f7["render()"]
  803321e0_2148_5caf_0e4e_ac9d7a2ce9f7 -->|calls| 9db0f7b9_610d_68bd_343a_4aedb4271a69
  41d77f4b_efbc_ff16_2b66_32298bcf24bd["render()"]
  9db0f7b9_610d_68bd_343a_4aedb4271a69 -->|calls| 41d77f4b_efbc_ff16_2b66_32298bcf24bd
  style 9db0f7b9_610d_68bd_343a_4aedb4271a69 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/Header.js lines 35–109

  render() {
    return (
      <header className="header">
        <div className="header__inner">
          <span className="header__logo">
            <img
              src={process.env.PUBLIC_URL + '/react-logo.svg'}
              alt="React"
              width="20"
              height="20"
            />
            <a href="/">
              DOM Test Fixtures (v
              {React.version})
            </a>
          </span>

          <div className="header-controls">
            <input
              id="react_production"
              className="header__checkbox"
              type="checkbox"
              checked={this.state.production}
              onChange={this.handleProductionChange}
            />
            <label htmlFor="react_production" className="header__label">
              Production
            </label>
            <label htmlFor="example">
              <span className="sr-only">Select an example</span>
              <select
                value={window.location.pathname}
                onChange={this.handleFixtureChange}>
                <option value="/">Home</option>
                <option value="/hydration">Hydration</option>
                <option value="/range-inputs">Range Inputs</option>
                <option value="/text-inputs">Text Inputs</option>
                <option value="/number-inputs">Number Input</option>
                <option value="/password-inputs">Password Input</option>
                <option value="/email-inputs">Email Input</option>
                <option value="/selects">Selects</option>
                <option value="/textareas">Textareas</option>
                <option value="/progress">Progress</option>
                <option value="/input-change-events">
                  Input change events
                </option>
                <option value="/buttons">Buttons</option>
                <option value="/date-inputs">Date Inputs</option>
                <option value="/error-handling">Error Handling</option>
                <option value="/event-pooling">Event Pooling</option>
                <option value="/custom-elements">Custom Elements</option>
                <option value="/media-events">Media Events</option>
                <option value="/pointer-events">Pointer Events</option>
                <option value="/mouse-events">Mouse Events</option>
                <option value="/selection-events">Selection Events</option>
                <option value="/suspense">Suspense</option>
                <option value="/form-actions">Form Actions</option>
                <option value="/form-state">Form State</option>
                <option value="/fragment-refs">Fragment Refs</option>
              </select>
            </label>
            <label htmlFor="global_version">
              <span className="sr-only">Select a version to test</span>
              <VersionPicker
                id="global_version"
                name="global_version"
                version={this.state.version}
                onChange={this.handleVersionChange}
              />
            </label>
          </div>
        </div>
      </header>
    );
  }