0xD34F

на 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? Почему его нет? Надо добавить.

activeProjects.map((project, i) => {
  <div key={i} className="focus-projects">

Ничего не возвращаете. Надо или фигурные скобки убрать, или return добавить.

Но вообще, пытаетесь делать что-то очень странное. Зачем массив activeProjects нужен как свойство стейта? Собирайте его прямо в render:

render() {
  const activeProjects = this.props.projects.filter(n => n.ProjectStatus === 'ACTIVE');
  ...

Не надо никаких массивов никуда передавать. Можно указать свойство isDisabled:

class App extends Component {
  state = {
    options: [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry", isDisabled: true },
      { value: "vanilla", label: "Vanilla" },
    ],
  }

  render() {
    return (
      <Select
        options={this.state.options}
      />
    );
  }
}

Но если кровь из носу нужен отдельный массив и метод для проверки, то можно как-нибудь так, например:

class App extends Component {
  state = {
    options: [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ],
    disabled: [ 'chocolate', 'vanilla' ],
  }

  isOptionDisabled = option => this.state.disabled.includes(option.value)

  render() {
    return (
      <Select
        options={this.state.options}
        isOptionDisabled={this.isOptionDisabled}
      />
    );
  }
}

Зачем при каждом выводе цены получать информацию по валютам? Запрашивайте её один раз, при создании экземпляра компонента, сохраняйте в стейт, при выводе цены доставайте нужный rate:

class App extends React.Component {
  state = {
    rates: {
      RUB: 1,
    },
    currency: 'RUB',
    currencies: [
      { name: 'RUB', label: 'RUB' },
      { name: 'USD', label: 'USD' },
      { name: 'EUR', label: 'EUR' },
    ],
  }

  onCurrencyChange = ({ target: { dataset: { currency } } }) => {
    this.setState({ currency });
  }

  componentDidMount() {
    fetch('https://www.floatrates.com/daily/rub.json')
      .then(res => res.json())
      .then(data => {
        this.setState(({ rates }) => ({
          rates: {
            ...rates,
            ...Object.values(data).reduce((acc, n) => (acc[n.code] = n.rate, acc), {}),
          },
        }));
      });
  }

  render() {
    const { currency, currencies, rates } = this.state;

    return (
      <div>
        {currencies.map(({ name, label }) => (
          <button
            className={`btn__item ${currency === name ? 'active' : ''}`}
            data-currency={name}
            onClick={this.onCurrencyChange}
          >
            {label}
          </button>
        ))}
        {this.props.products.map(({ name, price }) => (
          <div>
            <span>{name}</span>
            &nbsp;
            <span>{(price * rates[currency]).toFixed(2)} {currency}</span>
          </div>
        ))}
      </div>
    );
  }
}

const products = [
  { name: 'яблоки', price: '80' },
  { name: 'греча', price: '50' },
  { name: 'конфеты', price: '380' },
];

ReactDOM.render(<App products={products} />, document.getElementById('root'));