0xD34F

правильно ли я все понял?

нет

"Получить стандартное событие" - откуда вы это взяли? Испытываете проблемы с пониманием английского текста - можете попробовать русский вариант.

Я бы попробовал добавить массив имён обрабатываемых элементов.

componentDidUpdate(prevProps) {
  const id = this.props.match.params.id;
  if (id !== prevProps.match.params.id) {
    this.fetchSomeData(id);
  }
}

https://jsfiddle.net/Lqenu790/

или

https://jsfiddle.net/qugerz9x/

Передавайте в компонент списка обработчик клика, который будет данные кликнутого элемента сохранять. Эти сохранённые данные передавайте в компонент, где надо продублировать информацию. Как-то так.

.todo-list-item.done  {
 text-decoration: line-through;
};

Точку с запятой внизу видите? Уберите.

this.setState({
    done: true
});

Может, стоит не тупо true назначать, а переключать текущее значение на противоположное?

<span className= {classNames} 
   onClick= {this.onLabelClick} >{ label }
   <button type="button"  onClick= {this.onMarkClick }

Вынесите кнопку за пределы span'а, чтобы клик по ней не запускал обработчик на span'е.

https://jsfiddle.net/cj25ukzd/

class App extends React.Component {
  state = {
    tasks: [
      {
        id: 1,
        title: 'title',
        description: 'description',
      },
    ],
  }

  createTask = () => {
    this.setState(({ tasks }) => ({
      tasks: [
        ...tasks,
        {
          id: 1 + Math.max(0, ...tasks.map(n => n.id)),
          title: 'title',
          description: 'description',
        },
      ],
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.createTask}>Добавить задачу</button>
        <ul>
          {this.state.tasks.map(({ id, title, description }) => (
            <li key={id}>id: {id} | {title} | {description}</li>
          ))}
        </ul>
      </div>
    );
  }
}

const Block = ({ items }) => (
  <div className="info">
    <ul>{items.map(n => <li>{n}</li>)}</ul>
  </div>
);

class App extends React.Component {
  state = {
    items: [
      [  'hello, world!!',  '69' ],
      [  'fuck the world', '187' ],
      [ 'fuck everythign', '666' ],
    ],
    selected: null,
  }

  onClick = e => {
    this.setState({
      selected: +e.currentTarget.dataset.index,
    });
  }

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

    return (
      <div>
        <div className="wrap">
          {items.map((n, i) => (
            <div
              className={`wrap__el ${i === selected ? 'active' : ''}`}
              onClick={this.onClick}
              data-index={i}
            >
              <Block items={n} />
            </div>
          ))}
        </div>
        <div className="result">
          {selected !== null ? <Block items={items[selected]} /> : null}
        </div>
      </div>
    );
  }
}

Сделайте отдельные компоненты под страну, провинцию и город. Как-то так. Каждый из компонентов непосредственно выводит данные только своего уровня, а остальное передаёт в другой компонент.

не срабатывают case, всегда default

Всё-таки срабатывают.

Почему default случается когда вроде бы не должен - потому что у двух последних case'ов отсутствует break, соответственно, при их выполнении выполняется и default, идущий в самом конце.

Почему вы не видите эффекта от выполнения кода внутри case'ов - да потому что нечего видеть. Вы скопировали значение свойства display в переменную, и эта копия уже никакого отношения к оригиналу не имеет, что бы вы с ней не делали, это никак не отразится на элементе. Чтобы элемент изменился, надо новые значения назначать его свойствам. Но, конечно, не напрямую, а так, как это принято в react'е - заводите в компоненте стейт, на основе значений из стейта в методе render устанавливаете свойства элементам, когда хотите их изменить, обновляете стетйт.

Ещё пара моментов, которые стоит упомянуть:

Почему у вас li вложен в div? Разберитесь, какие элементы куда можно вкладывать, а куда нельзя.

Зачем два одинаковых обработчика клика? Второй, который у li, он не нужен - делает ровно то же, что и первый. Потому что... Почитайте, что такое всплытие событий.

Что пофиксить, подскажите плиз.

Ничего, полностью переписать:

.points {
  position: relative;
  height: 400px;
  border: 1px solid silver;
  overflow: hidden;
}

.point {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
}

class App extends React.Component {
  state = {
    points: [],
  }

  addPoint = ({ nativeEvent: { offsetX, offsetY } }) => {
    this.setState(({ points }) => ({
      points: [ ...points, {
        x: offsetX - 10,
        y: offsetY - 10,
      } ],
    }));
  }

  render() {
    return (
      <div className="points" onClick={this.addPoint}>
        {this.state.points.map(n => (
          <div className="point" style={{
            left: `${n.x}px`,
            top: `${n.y}px`,
          }}
          ></div>
        ))}
      </div>
    );
  }
}

<Transactions />

Не передаёте параметр transactions.

class="filter-menu"

Меняйте class на className. Не только тут, везде.

{transaction}

Объекты вот так передавать нельзя. Можете сделать JSON.stringify, или создать нормальную разметку, типа

<div>{transaction.type}</div>
<div>{transaction.date}</div>

useEffect(() => {
  const onKeypress = e => console.log(e);

  document.addEventListener('keypress', onKeypress);

  return () => {
    document.removeEventListener('keypress', onKeypress);
  };
}, []);

Сделать компонент рекурсивным, конечно же. Вложенные данные передаются в ещё один экземпляр компонента. Условие окончания рекурсии - некорректность данных (не являются массивом или имеют нулевую длину).

const Comments = ({ items }) =>
  Array.isArray(items) && items.length
    ? <React.Fragment>{items.map(n =>
        <div className="comment" key={n.id}>
          <h3>{n.name}</h3>
          <div>{n.body}</div>
          <Comments items={n.reply} />
        </div>)}
      </React.Fragment>
    : null;

А почему вы фильтруете разные массивы? - в одном случае brasAll (это как раз тот, который "перебивает все прошлые фильтры"), а в остальных tempProducts.

Почему метод,ответственный за фильтрацию, имеет в своём имени слово "sort"?

Ну и длинно как-то всё, не помешало бы сократить, можно сделать массив фильтров, элементы которого будут состоять из двух значений - применяем/нет фильтр и собственно функция фильтрации, затем прогоняем через полученные фильтры массив с данными, как-то так:

const filteredProducts = [
  [            true, n => n.type === 'Bras' ],
  [            true, n => n.price <= tempPrice ],
  [ color !== 'all', n => n.color === color ],
  [             cup, n => n.cup.includes(cup) ],
  [        shipping, n => n.freeShipping === true ],
  [          search, n => n.title.toLowerCase().startsWith(search.toLowerCase()) ],
].reduce((products, [ active, fn ]) => {
  return active
    ? products.filter(fn)
    : products;
}, storeProducts);

this.setState({ filteredProducts });

Добавляете в стейт свойство, указывающее сколько элементов надо показать. Также вешаете обработчик события скролла, в котором проверяете scrollTop - если дальше скроллить некуда, увеличиваете количество отображаемых элементов. Например.

{this.props.children}

Забыли return. Или фигурные скобки лишние. В articles.map.

export default props => (
  <ul>
    {props.articles.map(n => (
      <li key={n.id}><Article article={n} /></li>
    ))}
  </ul>
);

currentTarget:

event.currentTarget.getAttribute('имя_атрибута')

Или, есть вариант атрибут вообще не устанавливать, а передавать в обработчик нужное значение:

onClick={e => props.arrowHandler(e, VALUE)}

если условия задачи поменяются и...

Очевидно же - надо сделать отдельный компонент. "Условия" передавать через props, чтобы было как-то так:

<EditorWithTableOfContents tags={[ 'h1' ]} />
<EditorWithTableOfContents tags={[ 'h2', 'h3' ]} />

Сбор информации о заголовках - достаточно получить элементы и сохранить пары тэг-текст. При создании оглавления индексы элементам указываете общие, без разделения по тэгам. Когда надо выполнить прокрутку, берёте внутри редактора элемент с этим индексом:

const EditorWithTableOfContents = ({ tags }) => {
  const [headers, setHeaders] = useState([]);
  const editorEl = useRef(null);

  const onChange = e => {
    setHeaders(Array.from(
      e.editor.document.$.querySelectorAll(tags.join(', ')),
      n => [ n.tagName, n.innerText ]
    ));
  };

  const goToAnchor = e => {
    const index = e.target.dataset.index;
    const d = editorEl.current.editor.document.$;

    d.documentElement.scrollTo({
      top: d.querySelectorAll(tags.join(', '))[index].offsetTop,
      behavior: 'smooth',
    });
  };

  return (
    <div>
      <CKEditor
        data={initData}
        onInstanceReady={onChange}
        onChange={onChange}
        ref={editorEl}
      />
      <h2>Содержание</h2>
      {headers.map(([Tag, text], index) => (
        <Tag key={index} data-index={index} onClick={goToAnchor}>
          {text}
        </Tag>
      ))}
    </div>
  );
};

https://codesandbox.io/s/for-https-qna-habr-com-q-...