render() — react Function Reference

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

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  59628cfb_d105_40d1_ae57_6f35cd455920["render()"]
  d8384196_ab9d_98fa_dcbc_b835878631af["TextInputFixtures"]
  59628cfb_d105_40d1_ae57_6f35cd455920 -->|defined in| d8384196_ab9d_98fa_dcbc_b835878631af
  0a7f3ff6_eb00_3efc_0b36_1b443da3b09e["render()"]
  59628cfb_d105_40d1_ae57_6f35cd455920 -->|calls| 0a7f3ff6_eb00_3efc_0b36_1b443da3b09e
  style 59628cfb_d105_40d1_ae57_6f35cd455920 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/text-inputs/index.js lines 10–164

  render() {
    return (
      <FixtureSet
        title="Inputs"
        description="Common behavior across controlled and uncontrolled inputs">
        <TestCase title="Numbers in a controlled text field with no handler">
          <TestCase.Steps>
            <li>Move the cursor to after "2" in the text field</li>
            <li>Type ".2" into the text input</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The text field's value should not update.
          </TestCase.ExpectedResult>

          <Fixture>
            <div className="control-box">
              <fieldset>
                <legend>Value as number</legend>
                <input value={2} onChange={() => {}} />
              </fieldset>

              <fieldset>
                <legend>Value as string</legend>
                <input value={'2'} onChange={() => {}} />
              </fieldset>
            </div>
          </Fixture>

          <p className="footnote">
            This issue was first introduced when we added extra logic to number
            inputs to prevent unexpected behavior in Chrome and Safari (see the
            number input test case).
          </p>
        </TestCase>

        <TestCase
          title="Required Inputs"
          affectedBrowsers="Firefox"
          relatedIssues="8395">
          <TestCase.Steps>
            <li>View this test in Firefox</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            You should{' '}
            <b>
              <i>not</i>
            </b>{' '}
            see a red aura, indicating the input is invalid.
            <br />
            This aura looks roughly like:
            <input style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
          </TestCase.ExpectedResult>

          <Fixture>
            <form className="control-box">
              <fieldset>
                <legend>Empty value prop string</legend>
                <input value="" required={true} />
              </fieldset>
              <fieldset>
                <legend>No value prop</legend>
                <input required={true} />
              </fieldset>
              <fieldset>
                <legend>Empty defaultValue prop string</legend>
                <input required={true} defaultValue="" />
              </fieldset>
              <fieldset>
                <legend>No value prop date input</legend>
                <input type="date" required={true} />
              </fieldset>
              <fieldset>
                <legend>Empty value prop date input</legend>
                <input type="date" value="" required={true} />
              </fieldset>
            </form>
          </Fixture>

          <p className="footnote">