0xD34F

switch(this.props.cardType) {

Нет, так не надо. Лучше сделайте объект, где ключами будут вот эти cardType, а значениями - вынесенные в отдельные компоненты куски кода из case'ов. Тогда логика выбора что рендерить сократится до... В общем, совсем коротко и просто получится:

const Component = components[this.props.cardType];
return Component && <Component {...this.props} />;

https://jsfiddle.net/ptm0zay7/1/

class Parent extends React.Component {
  state = {
    count: 0,
  }

  onClick = () => {
    this.setState(({ count }) => ({
      count: count + 1,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Добавить компонент</button>
        {Array.from({ length: this.state.count }, () => <Input />)}
      </div>
    );
  }
}

получаю ошибку

Текст ошибки показывать не надо, так держать (не так).

вызываю в дочернем компоненте this.props.getCity(1, 'П')

Которого, если верить показанному вами коду, нет. Смотрим, откуда берётся getCity в дочернем компоненте - видим, что getCity={this.getCity}, при этом метод getCity в родительском компоненте отсутствует. Есть getCities. Это как?

передается пустой токен

Если для корректного функционирования дочернего компонента нужен токен, то не надо рендерить компонент в его отсутствие, дождитесь получения:

{this.state.token && <NewAdvert id="newadvert" 
  user={this.state.fetchedUser}  
  cities={this.cities}
  getCities={this.getCities}
  getCity={this.getCity}
  token={this.state.token}
  getToken={this.getToken}
  go={this.go}
/>}

кто документацию не читает - тот дурак

Как программно получить индексы Ряда и Ячейки для строки кода
this.showPillarHandler(p.data[индекс Ряда].data[индекс Ячейки]) ?

А не надо никаких индексов получать. Передавайте нужный объект в обработчик в самом нижнем компоненте вашей иерархии.

В компоненте Pillars делаете так: showMachine={this.showPillarHandler}.
В PillarListItem так: showShelfMachine={showMachine}.
И в ShelfListItem аналогично: showPlaceMachine={showShelfMachine}.
Наконец, в PlaceListItem: onClick={() => showPlaceMachine(seat)}.

P.S. Погуглите, что такое redux.

Вместо того, чтобы вручную создавать каждый блок, кладите текстовое содержимое блоков в массив, делайте по нему map. Вместо isOpen храните индекс открытого блока (если открыт может быть только один) или добавьте isOpen каждому элементу массива (если одновременно могут быть открыты несколько блоков).

class App extends Component {
  state = {
    users: []
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return(
      <div className="App">
        <table>
          <tbody>
          {this.state.users.map(n => (
            <tr key={n.id}>
              <td>{n.name}</td>
              <td>{n.username}</td>
              <td>{n.email}</td>
              <td>{n.website}</td>
            </tr>
          ))}
          </tbody>
        </table>
      </div>
    )
  }
}

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

Метод setState - асинхронный. Хотите получить доступ к изменённому стейту - используйте коллбек:

this.setState({
  request: e.target.value,
}, () => console.log(this.state.request))

// достаёте компонент из пропсов, обратите внимание, что
// имя переменной должно начинаться с большой буквы
const Component = this.props.component;

// ну и рендерите его
<Component />

Что делаю не так?

Пытаетесь изнасиловать труп - компонент не обновлялся уже три года. Либо найдите что-нибудь посвежее, либо перепишите его самостоятельно (там работы минут на пять, не больше).

Лишние фигурные скобки, должно быть так:

const ItemCheckbox = ({
  position,
}) => (
  position ? (
    <p>Hello</p>
  ) : (
    <p>Good</p>
  )
);

Добавьте key вашему CSVLink. Такой, чтобы зависел от содержимого rows.

getMyIP() {    
  return axios.get('https://httpbin.org/get').then(response => response.data.origin)
}
  
handleClick() {
  this.getMyIP().then(ip => console.log(`ip: ${ip}`))
}

передаю метод без аргумента onBlur={this.handleChange}

стоит мне изменить на onBlur={this.handleChange('title')}

Т-а-а-а-к, ясно. Осознаёте ли вы, что в первом случае вы назначаете в качестве обработчика onBlur метод handleChange, а во втором - результат его выполнения? Вы вообще понимаете, что функция и вызов функции - не одно и то же?

Хотите передавать параметр, делайте так: onBlur={() => this.handleChange('title')}. Или вместо передачи значения в качестве параметра добавляйте его элементу как атрибут, а в обработчике события считывайте:

onBlur={this.handleChange} data-change-param="title"

handleChange = (e) => {
  const changeParam = e.target.getAttribute('data-change-param');
  ...

Мне нужно чтобы валидация происходила только после нажатии на кнопку Submit.

Я так понимаю, вы считаете чтение документации излишним. Это зря - там есть пример того, что вам надо.

Всё работает как надо. Просто у вас, в отличие от примера из документации, различаются значения полей key и title, поэтому при поиске вы проверяете не те значения, которые отображаете. Замените в методе generateList

dataList.push({ key, title: key });

на

dataList.push({ key, title: node.title });

Зачем onClick? - при повторном клике на инпут класс удалится, а клик снаружи инпута вы так не обработаете. Наверное, стоит использовать onFocus и onBlur:

class App extends React.Component {
  state = {
    classes: [ 'bullshit' ],
  }

  onFocus = () => {
    this.setState(({ classes }) => ({
      classes: [ ...classes, 'focus' ],
    }));
  }

  onBlur = () => {
    this.setState(({ classes }) => ({
      classes: classes.filter(n => n !== 'focus'),
    }));
  }

  render() {
    return (
      <div className={this.state.classes.join(' ')}>
        <input onFocus={this.onFocus} onBlur={this.onBlur} />
      </div>
    );
  }
}

state отказывается обновляться

Риторический вопрос - а с чего вы решили, что он должен обновляться? Вообще, подобные заблуждения имеют своей причиной крайне слабые знания js, задумайтесь над этим.

Проверяйте в componentDidUpdate, что props изменились - если да, делайте setState (побочным результатом будет двойное обновление компонента, можно избежать этого с помощью shouldComponentUpdate). Или используйте getDerivedStateFromProps.

А ещё лучше - хорошенько подумайте, действительно ли вам нужно дублировать props в state. Вероятно, есть вариант обойтись использованием только props.

Компонент Item, обработчик onImportantClick - надо останавливать всплытие события, чтобы оно не обрабатывалась ещё и в onItemClick, т.е.:

onImportantClick = (e) => {
  e.stopPropagation();
  this.setState(({ important }) => ({
    important: !important
  }));
};

const jsx = э-э-э, чё, это у вас тут фигурная скобка?

ошибка появилась из ниоткуда

Нет, она появилась из вашего невежества и лени. Вы бы почитали про jsx хоть что-нибудь, прежде чем начать код писать, чтобы вот так не позориться. Меняйте скобки на круглые.