react Architecture Docs
Home / Class/ ChildComponent Class — react Architecture

ChildComponent Class — react Architecture

Architecture documentation for the ChildComponent class in ReactCompositeComponentNestedState-test.js from the react codebase.

Class javascript

Entity Profile

Dependency Diagram

graph TD
  1317fb94_2e60_b063_266a_96909a9c0ce0["ChildComponent"]
  96908977_3082_9a4f_b812_f0906f853c53["ReactCompositeComponentNestedState-test.js"]
  1317fb94_2e60_b063_266a_96909a9c0ce0 -->|defined in| 96908977_3082_9a4f_b812_f0906f853c53
  909527ba_3f3e_d8c0_6a39_0035104cc6b4["constructor()"]
  1317fb94_2e60_b063_266a_96909a9c0ce0 -->|method| 909527ba_3f3e_d8c0_6a39_0035104cc6b4
  31634268_e2d5_5862_9997_3b8d9ec874a3["render()"]
  1317fb94_2e60_b063_266a_96909a9c0ce0 -->|method| 31634268_e2d5_5862_9997_3b8d9ec874a3

Relationship Graph

Source Code

packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js lines 46–95

    class ChildComponent extends React.Component {
      constructor(props) {
        super(props);
        props.logger('getInitialState', props.color);
        this.state = {hue: 'dark ' + props.color};
      }

      handleHue = (shade, color) => {
        this.props.logger('handleHue', this.state.hue, this.props.color);
        this.props.onSelectColor(color);
        this.setState(
          function (state, props) {
            this.props.logger(
              'setState-this',
              this.state.hue,
              this.props.color,
            );
            this.props.logger('setState-args', state.hue, props.color);
            return {hue: shade + ' ' + props.color};
          },
          function () {
            this.props.logger(
              'after-setState',
              this.state.hue,
              this.props.color,
            );
          },
        );
      };

      render() {
        this.props.logger('render', this.state.hue, this.props.color);
        return (
          <div>
            <button onClick={this.handleHue.bind(this, 'dark', 'blue')}>
              Dark Blue
            </button>
            <button onClick={this.handleHue.bind(this, 'light', 'blue')}>
              Light Blue
            </button>
            <button onClick={this.handleHue.bind(this, 'dark', 'green')}>
              Dark Green
            </button>
            <button onClick={this.handleHue.bind(this, 'light', 'green')}>
              Light Green
            </button>
          </div>
        );
      }
    }

Defined In

Source

Frequently Asked Questions

What is the ChildComponent class?
ChildComponent is a class in the react codebase, defined in packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js.
Where is ChildComponent defined?
ChildComponent is defined in packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js at line 46.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free