render() — react Function Reference

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

Function javascript BabelCompiler Entrypoint calls 1

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  c3edbbfb_3d1c_4986_1679_da4bcdec75f7["render()"]
  d1d51617_ad04_c227_f8bd_1700e89ec396["RangeKeyboardFixture"]
  c3edbbfb_3d1c_4986_1679_da4bcdec75f7 -->|defined in| d1d51617_ad04_c227_f8bd_1700e89ec396
  30746efb_479a_3265_6cf9_08410a792f23["render()"]
  c3edbbfb_3d1c_4986_1679_da4bcdec75f7 -->|calls| 30746efb_479a_3265_6cf9_08410a792f23
  style c3edbbfb_3d1c_4986_1679_da4bcdec75f7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js lines 50–76

  render() {
    const {keydownCount, changeCount} = this.state;
    const color = keydownCount === changeCount ? 'green' : 'red';

    return (
      <Fixture>
        <div>
          <input
            type="range"
            ref={r => (this.input = r)}
            onChange={this.handleChange}
          />
          <button onClick={() => this.input.focus()}>Focus Knob</button>
        </div>{' '}
        <p style={{color}}>
          <code>onKeyDown</code>
          {' calls: '}
          <strong>{keydownCount}</strong>
          {' vs '}
          <code>onChange</code>
          {' calls: '}
          <strong>{changeCount}</strong>
        </p>
        <button onClick={this.handleReset}>Reset counts</button>
      </Fixture>
    );
  }