learn-react-component-state

Chat.js

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div style={{ display: "flex", flexDirection: "row" }}>
        <Status />
        <Conversation />
      </div>
    );
  }
}

export default App;

class Status extends React.Component {
  render() {
    return (
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div
          onClick={this._onClick}
          style={{
            backgroundColor: this.state.online ? "green" : "gray",
            borderRadius: 12,
            height: 24,
            width: 24,
          }}
        ></div>
        {this.state.online ? "Online" : "Invisible"}
      </div>
    );
  }

  constructor() {
    super();
    this.state = {
      online: true,
    };
    this._onClick = this._onClick.bind(this);
  }

  _onClick() {
    this.setState({ online: !this.state.online });
  }
}

class Conversation extends React.Component {
  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this._onChange} />
        <input type="Submit" value="Send" />
      </div>
    );
  }

  constructor() {
    super();
    this.state = {
      value: "",
    };
    this._onChange = this._onChange.bind(this);
  }

  _onChange(event) {
    this.setState({ value: event.target.value });
  }
}

rainbow.js

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div>
          <div
            style={{
              height: 700,
              width: 700,
              backgroundColor: this._colors[this.state.index],
            }}
          />
          <ul
            style={{
              display: "flex",
              margin: 0,
              padding: 0,
              flexDirection: "row",
              listStyleType: "none",
            }}
          >
            {this._colors.map(this._renderColor)}
          </ul>
        </div>
        <div>
          <button
            onClick={this._onClickPrevious}
            disabled={this.state.index === 0}
          >
            {"<<"}
          </button>
          <button onClick={this._onClickNext} disabled={this.state.index === 6}>
            {">>"}
          </button>
        </div>
      </div>
    );
  }

  constructor() {
    super();

    this._colors = [
      "red",
      "orange",
      "yellow",
      "green",
      "blue",
      "indigo",
      "violet",
    ];

    this.state = {
      index: 0,
    };

    this._onClickPrevious = this._onClickPrevious.bind(this);
    this._onClickNext = this._onClickNext.bind(this);
    this._renderColor = this._renderColor.bind(this);
    this._handleClick = this._handleClick.bind(this);
  }

  _onClickPrevious() {
    this.setState({ index: this.state.index === 0 ? 0 : this.state.index - 1 });
  }

  _onClickNext() {
    this.setState({ index: this.state.index === 6 ? 6 : this.state.index + 1 });
  }

  _renderColor(_, index) {
    return (
      <Palette
        key={index}
        selected={this.state.index === index}
        color={this._colors[index]}
        onClick={() => this._handleClick(index)}
      />
    );
  }

  _handleClick(index) {
    this.setState({ index });
  }
}

export default App;

class Palette extends React.Component {
  render() {
    return (
      <div>
        <li
          onClick={this.props.onClick}
          style={{
            height: 250,
            width: 100,
            backgroundColor: this.props.color,
            border: this.props.selected && "1px solid black",
          }}
        ></li>
      </div>
    );
  }
}