render() — react Function Reference

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

Function javascript BabelCompiler Optimization calls 1 called by 1

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  8989a312_d57d_eb21_190f_f23e06e8b008["render()"]
  eb8d377d_f685_5ff6_8793_29bd1c6d16e3["SelectFixture"]
  8989a312_d57d_eb21_190f_f23e06e8b008 -->|defined in| eb8d377d_f685_5ff6_8793_29bd1c6d16e3
  794219c4_b9d6_7c2b_af9b_6368503fa4dc["_renderNestedSelect()"]
  794219c4_b9d6_7c2b_af9b_6368503fa4dc -->|calls| 8989a312_d57d_eb21_190f_f23e06e8b008
  0a7f3ff6_eb00_3efc_0b36_1b443da3b09e["render()"]
  8989a312_d57d_eb21_190f_f23e06e8b008 -->|calls| 0a7f3ff6_eb00_3efc_0b36_1b443da3b09e
  style 8989a312_d57d_eb21_190f_f23e06e8b008 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/selects/index.js lines 47–235

  render() {
    return (
      <FixtureSet title="Selects">
        <form className="field-group">
          <fieldset>
            <legend>Controlled</legend>
            <select value={this.state.value} onChange={this.onChange}>
              <option value="">Select a color</option>
              <option value="red">Red</option>
              <option value="blue">Blue</option>
              <option value="green">Green</option>
            </select>
            <span className="hint">Value: {this.state.value}</span>
          </fieldset>
          <fieldset>
            <legend>Uncontrolled</legend>
            <select defaultValue="">
              <option value="">Select a color</option>
              <option value="red">Red</option>
              <option value="blue">Blue</option>
              <option value="green">Green</option>
            </select>
          </fieldset>
          <fieldset>
            <legend>Controlled in nested subtree</legend>
            <div ref={node => (this._nestedDOMNode = node)} />
            <span className="hint">
              This should synchronize in both direction with the "Controlled".
            </span>
          </fieldset>
        </form>

        <TestCase title="A selected disabled option" relatedIssues="2803">
          <TestCase.Steps>
            <li>Open the select</li>
            <li>Select "1"</li>
            <li>Attempt to reselect "Please select an item"</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The initial picked option should be "Please select an item", however
            it should not be a selectable option.
          </TestCase.ExpectedResult>

          <div className="test-fixture">
            <select defaultValue="">
              <option value="" disabled>
                Please select an item
              </option>
              <option>0</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
        </TestCase>

        <TestCase title="An unselected disabled option" relatedIssues="2803">
          <TestCase.ExpectedResult>
            The initial picked option value should "0": the first non-disabled
            option.
          </TestCase.ExpectedResult>

          <div className="test-fixture">
            <select defaultValue="">
              <option disabled>Please select an item</option>
              <option>0</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
        </TestCase>

        <TestCase title="A single select being reset">
          <TestCase.Steps>
            <li>Open the select</li>
            <li>Select "baz" or "foo"</li>
            <li>Click the "Reset" button</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            The select should be reset to the initial value, "bar"
          </TestCase.ExpectedResult>