render() — react Function Reference

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

Function javascript BabelCompiler Entrypoint calls 1

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  ea0aaf85_932b_3e99_0128_07d35203057e["render()"]
  9bd26dfc_10b4_6299_f41b_40abb9b4dd6a["TextAreaFixtures"]
  ea0aaf85_932b_3e99_0128_07d35203057e -->|defined in| 9bd26dfc_10b4_6299_f41b_40abb9b4dd6a
  0a7f3ff6_eb00_3efc_0b36_1b443da3b09e["render()"]
  ea0aaf85_932b_3e99_0128_07d35203057e -->|calls| 0a7f3ff6_eb00_3efc_0b36_1b443da3b09e
  style ea0aaf85_932b_3e99_0128_07d35203057e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/textareas/index.js lines 12–83

  render() {
    return (
      <FixtureSet title="Textareas">
        <TestCase
          title="Kitchen Sink"
          description="Verify that the controlled textarea displays its value under 'Controlled Output', and that both textareas can be typed in">
          <div>
            <form className="container">
              <fieldset>
                <legend>Controlled</legend>
                <textarea value={this.state.value} onChange={this.onChange} />
              </fieldset>
              <fieldset>
                <legend>Uncontrolled</legend>
                <textarea defaultValue="" />
              </fieldset>
            </form>
            <div className="container">
              <h4>Controlled Output:</h4>
              <div className="output">{this.state.value}</div>
            </div>
          </div>
        </TestCase>
        <TestCase title="Placeholders">
          <TestCase.ExpectedResult>
            The textarea should be rendered with the placeholder "Hello, world"
          </TestCase.ExpectedResult>
          <div style={{margin: '10px 0px'}}>
            <textarea placeholder="Hello, world" />
          </div>
        </TestCase>

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

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

          <Fixture>
            <form className="control-box">
              <fieldset>
                <legend>Empty value prop string</legend>
                <textarea value="" required={true} />
              </fieldset>
              <fieldset>
                <legend>No value prop</legend>
                <textarea required={true} />
              </fieldset>
              <fieldset>
                <legend>Empty defaultValue prop string</legend>
                <textarea required={true} defaultValue="" />
              </fieldset>
            </form>
          </Fixture>
        </TestCase>
      </FixtureSet>
    );
  }