React

HTML

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

CSS

button {
  width:100px;
  height:50px;
}

React

class ButtonOnDescription extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isClicked: true,
            isLiked: false,
            isShared: false,
            isSubmitted: false
        };
    }

        handleClickShow = () => {
            this.setState({
                isClicked: !this.state.isClicked,
            });
        }
        
        handleSubmit = () => {
           this.setState({ isSubmitted: !this.state.isSubmitted })
        }
        
        render() {
          return (
            <div>
                <button 
                  className='submit' 
                  onClick={this.handleClickShow}>
                {this.state.isSubmitted ? 'вы записаны' : 'записаться'}
                </button>
                
                {!this.state.isClicked && 
                  <EventForm 
                    isSubmitted={this.state.isSubmitted}
                    handleSubmit={this.handleSubmit}>
                  {this.props.children}
                  </EventForm>
                }
            </div>
          )
        }
}

const EventForm = props => (
            <div>
                <button className='send-form' onClick={props.handleSubmit}>
                    {!props.isSubmitted ? 'Отправить' : 'Отправлено'}
                </button>
            </div>
        )

const Main = () => {
  return <ButtonOnDescription /> 
}



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