0xD34F

class App extends React.Component {
  state = {
    items: [...Array(20).keys()],
    chunkLen: 3,
  }

  onClick = ({ target: { dataset: { change } } }) => {
    this.setState(({ chunkLen }) => ({
      chunkLen: Math.max(2, Math.min(9, chunkLen + +change)),
    }));
  }

  render() {
    const { items, chunkLen } = this.state;
    const chunks = Array.from(
      { length: Math.ceil(items.length / chunkLen) },
      (n, i) => items.slice(i * chunkLen, (i + 1) * chunkLen)
    );

    return (
      <div>
        <button data-change="-1" onClick={this.onClick}>-</button>
        {chunkLen}
        <button data-change="+1" onClick={this.onClick}>+</button>
        <div>
          {chunks.map(chunk => (
            <div className="group">
              {chunk.map(n => <div className="group-item">{n}</div>)}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: Array.from({ length: 10 }, (n, i) => ({
      id: i + 1,
      value: String.fromCharCode(97 + i).repeat(5),
    })),
    active: [],
  }

  toggleActive = e => {
    const id = +e.target.dataset.id;

    this.setState(({ active }) => ({
      active: active.includes(id)
        ? active.filter(n => n !== id)
        : [ ...active, id ],
    }));
  }

  render() {
    const { items, active } = this.state;

    return (
      <ul>
        {items.map(n => (
          <li
            key={n.id}
            data-id={n.id}
            onClick={this.toggleActive}
            className={active.includes(n.id) ? 'active' : ''}
          >
            {n.value}
          </li>
        ))}
      </ul>
    );
  }
}

<Switch>
    <div id="main" className="site__main">

const classes = {
  0: 'first',
  [props.data.length - 1]: 'last',
};

_react.default.createContext is not a function

гугл советует перейти на 16 версию реакта, но не думаю что это проблема старой версии

"react-redux": "^6.0.0"

React Redux 6.x requires React 16.4 or later.

сначала сделать запрос <...> после чего отрисовать страницу

onNoteAdd = {this.handleNoteAdd.bind(this)}

this.props.onNodeAdd(newNote)

const newNote = {
  title: this.state.title,
  text: this.state.text,
  color: this.state.color
};

this.props.onNodeAdd(newNote);

onChange = ({ target: { name, value } }) => {
  this.setState({ [name]: value });
}

<input
  name="title"
  onChange={this.onChange}
  ...
/>
<textarea
  name="text"
  onChange={this.onChange}
  ...
/>

const DataList = ({ data }) => (
  <div>
    {data.map((item) => (
      <div key={item.id}>
        {item.title}
        {item.round.map((r) => <div key={r.id}>{r.total}</div>)}
      </div>
    ))}
  </div>
);

<DataList data={props.data.slice(0, 3)} />
<Separator />
<DataList data={props.data.slice(3)} />

const RadioGroup = props => (
  <div>
    {props.items.map(n => (
      <label className={`radio ${n.val == props.value ? 'selected' : ''}`}>
        <input 
          type="radio"
          name={props.name}
          value={n.val}
          checked={n.val === props.value}
          onChange={props.onChange}
        />
        <img src={n.img} />
      </label>
    ))}
  </div>
);

state = {
  active: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ active }) => ({
    active: active === name ? null : name,
  }));
}

<button onClick={this.toggle} data-name="collapse_1"></button>
<button onClick={this.toggle} data-name="collapse_2"></button>
<button onClick={this.toggle} data-name="collapse_3"></button>

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ collapse }) => ({
    collaple: {
      ...collapse,
      [name]: !collapse[name],
    },
  }));
}

<div
  style={
    сюда кидаете объект со стилями, которому
    назначаете свойства в зависимости от своих переменных
  }
>

this.setState(({ clientData }) => ({
  clientData: {
    ...clientData,
    active: !clientData.active,
  },
}));

likeHandler = (id) => {
  this.setState(({ products }) => ({
    products: products.map(n => n.id === id
      ? { ...n, saved: !n.saved }
      : n
    ),
  }));
}