render() — react Function Reference

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

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  eba33d2a_b797_bd1b_9328_3ce7061e0707["render()"]
  96067427_d2df_b03a_f5f9_2312bc108548["InputChangeEvents"]
  eba33d2a_b797_bd1b_9328_3ce7061e0707 -->|defined in| 96067427_d2df_b03a_f5f9_2312bc108548
  style eba33d2a_b797_bd1b_9328_3ce7061e0707 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/input-change-events/index.js lines 11–113

  render() {
    return (
      <FixtureSet
        title="Input change events"
        description="Tests proper behavior of the onChange event for inputs">
        <TestCase
          title="Range keyboard changes"
          description={`
            Range inputs should fire onChange events for keyboard events
          `}>
          <TestCase.Steps>
            <li>Focus range input</li>
            <li>change value via the keyboard arrow keys</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onKeyDown</code> call count should be equal to the{' '}
            <code>onChange</code> call count.
          </TestCase.ExpectedResult>

          <RangeKeyboardFixture />
        </TestCase>

        <TestCase
          title="Radio input clicks"
          description={`
            Radio inputs should only fire change events when the checked
            state changes.
          `}
          resolvedIn="16.0.0">
          <TestCase.Steps>
            <li>Click on the Radio input (or label text)</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onChange</code> call count should remain at 0
          </TestCase.ExpectedResult>

          <RadioClickFixture />
        </TestCase>
        <TestCase
          title="Uncontrolled radio groups"
          description={`
            Radio inputs should fire change events when the value moved to
            another named input
          `}
          introducedIn="15.6.0">
          <TestCase.Steps>
            <li>Click on the "Radio 2"</li>
            <li>Click back to "Radio 1"</li>
            <li>Click back to "Radio 2"</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onChange</code> call count increment on each value change
            (at least 3+)
          </TestCase.ExpectedResult>

          <RadioGroupFixture />
        </TestCase>

        <TestCase
          title="Inputs with placeholders"
          description={`
            Text inputs with placeholders should not trigger changes
            when the placeholder is altered
          `}
          resolvedIn="15.0.0"
          resolvedBy="#5004"
          affectedBrowsers="IE9+">
          <TestCase.Steps>
            <li>Click on the Text input</li>
            <li>Click on the "Change placeholder" button</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The <code>onChange</code> call count should remain at 0
          </TestCase.ExpectedResult>

          <InputPlaceholderFixture />
        </TestCase>