0xD34F

Нужны две штуки: функция, которая превратит nested set в настоящее дерево (в смысле - из плоской структуры сделает вложенную) и рекурсивный компонент, который это дерево отобразит. Например.

getCitiesOptions = () => {
  const country = +this.state.country;

  return Object
    .entries(cities)
    .filter(n => n[1].country === country)
    .map(([ id, city ]) => <option key={id} value={id}>{city.name}</option>);
}

на youtube

Нет конечно. Доверяйте официальной документации.

state = {
  block1: false,
  block2: false,
}

componentDidMount() {
  setTimeout(() => this.setState({ block1: true }), 3000);
  setTimeout(() => this.setState({ block2: true }), 6000);
}

render() {
  const { block1, block2 } = this.state;
  return (
    ...
      {block1 && <div class="block-1">Блок 1</div>}
      {block2 && <div class="block-2">Блок 2</div>}
    ...
  );
}

UPD. https://jsfiddle.net/jaLgf9w7/

Если не хотите, чтобы showWorks вызывалась, то отменять всплытие надо не в ней, а ниже. Цепляйте ещё один обработчик onTransitionEnd - к той ReactCSSTransitionGroup, чьи события не хотите обрабатывать.

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Так же, как и везде:

stop(e) {
  e.stopPropagation();
}

onTransitionEnd={this.stop}

if (novyna.lenght) {

Что ещё за "lenght"? Я такого слова не знаю. Есть "length".

в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало

Предлагаю разобраться, чем присваивание отличается от проверки на равенство.

class News extends React.Component {

У этого компонента нет причин быть классом:

const News = ({ news }) =>
  <div className="news">
    {Array.isArray(news) && news.length
      ? news.map(n => (
          <div key={n.id}>
            <p className="news__author">{n.author}:</p>
            <p className="news__text">{n.text}</p>
            <hr/>
          </div>
        ))
      : <p>Нет</p>}
    <strong>Всего новостей: {news.length}</strong>
  </div>;

updateUser = (id, words) => {
  this.setState(({ users }) => ({
    users: users.map(n => n.id === id
      ? { ...n, words: [ ...n.words, ...words ] }
      : n
    ),
  }));
}

https://jsfiddle.net/1qtwp35u/

почему вот такой код не работает

onLoad={(inst)=>{return inst.events.add('click', clickOnMap)}}

Потому что через onLoad вы получаете доступ к ymaps api, а не к экземпляру карты.

Хотите экземпляр карты - используйте instanceRef:

instanceRef={inst => inst.events.add('click', clickOnMap)}

Но вообще, для того, чтобы назначить обработчик клика, экземпляр карты трогать не надо:

onClick={clickOnMap}

const citiesListNames = citiesList.map( item => {
  return item.name 
} )

Круто. Непонятно только, как после подобной манипуляции отличить Париж в Иль-де-Франс от Парижа в Онтарио. Или Москву Московской области от Москвы Пенсильвании.

приложение зависает от такого колличества данных

Как напрямую ограничить количество показываемых записей - что-то в документации не нашёл такой возможности. Можно попробовать закостылить это дело.

Ну а вообще, загружать на клиент сто тысяч записей - так делать не очень-то и принято. Пользователь в любом случае столько информации за один раз воспринять не сможет.

1. https://developer.mozilla.org/ru/docs/Web/JavaScri...
2. https://developer.mozilla.org/ru/docs/Web/JavaScri...

Забудьте про реакт на ближайшие полгода и марш изучать js.

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

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

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

    return (
      <div>
        {items.map((n, i) => (
          <div
            key={n.id}
            data-index={i}
            className={i === active ? 'active' : ''}
            onClick={this.onClick}
          >{n.text}</div>
        ))}
      </div>
    );
  }
}

const Header = ({ Top }) => (
  <div className="navHeader">
    <Top />
  </div>
);

...

<Header Top={Top} />

class TabContent extends React.Component {
  render() {
    const { title, content } = this.props;

    return (
      <div className="tabcontent">
        <h3>{title}</h3>
        <p>{content}</p> 
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: null,
  }

  openTab = e => this.setState({
    active: +e.target.dataset.index,
  });

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

    return (
      <div>
        <div className="tab">
          {items.map((n, i) => (
            <button
              className={`tablinks ${i === active ? 'active' : ''}`}
              onClick={this.openTab}
              data-index={i}
            >{n.title}</button>
          ))}
        </div>
        {items[active] && <TabContent {...items[active]} />}
      </div>
    );
  }
}

Потому что вы постоянно обновляете стейт.

Наверное, вы хотели задать начальное значение - указывайте его в качестве параметра при вызове useState.

const Modal = (props) => {
  const onClick = e => {
    if (e.target.classList.contains('close') || !e.target.closest('.modal-content')) {
      props.close();
    }
  }

  return (
    <div className="modal" onClick={onClick}>
      <div className="modal-content">
        <span className="close">&times;</span>
        {props.children}
      </div>
    </div>
  );
};

const App = () => {
  const [ opened, setOpened ] = React.useState(false);

  const open = () => setOpened(true);
  const close = () => setOpened(false);

  return (
    <div>
      <h2>Modal Example</h2>
      <button onClick={open}>Open Modal</button>
      {opened && <Modal close={close}>hello, world!!</Modal>}
    </div>
  );
}

https://jsfiddle.net/zuscf0wo/

А где же обработчик onChange? Почему его нет? Надо добавить.