Реагировать: состояние не срабатывает, возврат

Используйте метод setState, если вы хотите обновить свое состояние, никогда не устанавливайте свое состояние напрямую как this.state.something == .... Так,

const showModal = e => {
  if (this.state.modal === "block") {
    this.setState({ modal: "none" });
  } else {
    this.setState({ modal: "block" });
  }
};

Кроме того, не следует сразу записывать свое состояние таким образом, поскольку оно асинхронное. Вы не можете увидеть такое состояние обновлений. Для setState есть функция обратного вызова, но вы можете легко зарегистрировать свое состояние в методе рендеринга.

render(){
    console.info( this.state.modal );
    return( ... );
}

Я не заметил, когда в первый раз покупал, что ваш компонент является функциональным, поэтому вы не можете использовать там this.state. Просто определите его как классный.

class ContactCard extends React.Component {
  state = { modal: "block" };

  showModal = () => {
    if ( this.state.modal === "block" ) {
      this.setState({ modal: "none" });
    } else {
      this.setState({ modal: "block" });
    }
  };

  render() {
    console.info( this.state.modal );
    return (
      <div>
        <div>
          <button onClick = {this.showModal}>Open Modal</button>
          <div style = {{ display: this.state.modal }}>
            <h2>The text</h2>
          </div>
        </div>
        <div className = "clearfix" />
      </div>
    );
  }
}

export default ContactCard;

Вы создали функциональный компонент. Функциональные компоненты не имеют доступа к состоянию.

Я бы рекомендовал прочитать это руководство с разделов 4 по 5: https://reactjs.org/docs/components-and-props.html

Вторая проблема заключается в том, что вы пытаетесь установить состояние напрямую через присваивание.

this.state.modal === 'block' . // Incorrect

Вместо этого вы должны использовать this.setState({ modal: 'block' }).

Хорошо 1.) данные в response хранятся в состоянии, которое доступно только в компоненте на основе класса, убедитесь, что всякий раз, когда вам требуется состояние в компоненте, создавайте этот класс компонента на основе. 2.) Никогда не изменяйте состояние напрямую, для этого используется метод setState. 3.) Никогда не изменяйте напрямую массивы и объекты, так как это ссылочные типы.

Поскольку вы получаете доступ к состоянию и изменяете его, вам необходимо изменить свой функциональный компонент, чтобы реагировать на компонент класса, как показано ниже. Также вам нужно изменить состояние, и для этого вам нужно использовать setState, чтобы обновленное значение было отображено. seState - это метод для изменения значения состояния, и всякий раз, когда вы выполняете setState, ваш компонент будет отображаться один раз для каждого setState.

Если вы измените состояние как this.state.modal = 'block'; измененное значение не будет отображаться, и это не рекомендуется

import React from 'react';
class ContactCard extends React.Component{

constructor(props){
   super(props);
   this.state = {modal: 'block'}
}

showModal = e => {
    const { modal } = this.state;
    if (modal == 'block') {
        this.setState({modal: 'none'}, ()=> {
            console.info(modal);//this will print none here
        });

    } else {
        this.setState({modal : 'block'}, () => {
            console.info(modal);//this will print block here
        });
    }
};

render(){
 const { modal } = this.state;
 return (
    <div>
        <div>
            <button onClick = {this.showModal}>Open Modal</button>
            <div style = { { display: modal } }>
                <h2>The text</h2>
            </div>
        </div>
        <div className = "clearfix"></div>
    </div >
  )
 }
}

  export default ContactCard;