render() — react Function Reference

Architecture documentation for the render() function in App.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
  de1a7d40_fb4e_d77c_893a_dfa22cf58ef3["render()"]
  7796199a_976b_30de_2bf9_e72aa702c083["App"]
  de1a7d40_fb4e_d77c_893a_dfa22cf58ef3 -->|defined in| 7796199a_976b_30de_2bf9_e72aa702c083
  25140fd7_e5bf_665b_f3ed_dfc133920392["render()"]
  25140fd7_e5bf_665b_f3ed_dfc133920392 -->|calls| de1a7d40_fb4e_d77c_893a_dfa22cf58ef3
  25140fd7_e5bf_665b_f3ed_dfc133920392["render()"]
  de1a7d40_fb4e_d77c_893a_dfa22cf58ef3 -->|calls| 25140fd7_e5bf_665b_f3ed_dfc133920392
  style de1a7d40_fb4e_d77c_893a_dfa22cf58ef3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/attribute-behavior/src/App.js lines 997–1052

  render() {
    if (!this.state.table) {
      return (
        <div>
          <h1>Loading...</h1>
          {!useFastMode && (
            <h3>The progress is reported in the window title.</h3>
          )}
        </div>
      );
    }
    return (
      <div>
        <div>
          <select value={this.state.sortOrder} onChange={this.onUpdateSort}>
            <option value={ALPHABETICAL}>alphabetical</option>
            <option value={REV_ALPHABETICAL}>reverse alphabetical</option>
            <option value={GROUPED_BY_ROW_PATTERN}>
              grouped by row pattern :)
            </option>
          </select>
          <select value={this.state.filter} onChange={this.onUpdateFilter}>
            <option value={ALL}>all</option>
            <option value={INCOMPLETE}>incomplete</option>
            <option value={COMPLETE}>complete</option>
          </select>
          <button style={{marginLeft: '10px'}} onClick={this.handleSaveClick}>
            Save latest results to a file{' '}
            <span role="img" aria-label="Save">
              💾
            </span>
          </button>
        </div>
        <AutoSizer disableHeight={true}>
          {({width}) => (
            <MultiGrid
              ref={input => {
                this.grid = input;
              }}
              cellRenderer={this.renderCell}
              columnWidth={200}
              columnCount={1 + types.length}
              fixedColumnCount={1}
              enableFixedColumnScroll={true}
              enableFixedRowScroll={true}
              height={1200}
              rowHeight={40}
              rowCount={this.attributes.length + 1}
              fixedRowCount={1}
              width={width}
            />
          )}
        </AutoSizer>
      </div>
    );
  }