score:2

import React from "react";
import ReactDOM from "react-dom";

class A extends React.Component {
  state = {
    items: [0, 1, 2],
    selected: 0
  };

  select = val => {
    this.setState({
      selected: val
    });
  };

  reset = () => {
    this.setState({
      selected: 0
    });
  };

  render() {
    return (
      <React.Fragment>
        <B {...this.state} select={this.select} />
        <button onClick={this.reset}>reset</button>
      </React.Fragment>
    );
  }
}

class B extends React.Component {
  render() {
    return (
      <C
        items={this.props.items}
        select={this.props.select}
        selected={this.props.selected}
      />
    );
  }
}

class C extends React.Component {
  render() {
    const { items, selected } = this.props;

    return items.map(i => (
      <div
        onClick={() => this.props.select(i)}
        style={{ color: i === selected ? "red" : "black" }}
      >
        {i}
      </div>
    ));
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<A />, rootElement);

Related Query

More Query from same tag