How to get a promise when handling the onClick event?

Question

React

I can not figure out the sequence of the application, rather with the sequence of state changes. The application duplicates the functionality of messages on the VK network and is based accordingly on its API. Works through wrapper 'vk-sdk' It is necessary to display incoming messages from a group in VK in the site admin panel with the ability to respond. Application code:

import vk from 'vk-sdk'
import React from 'react'
import ReactDOM from 'react-dom'
const url="api-url";
vk.setToken('мой-токен-ВК');
class Message extends React.Component {
       constructor(props) {
          super(props);
          this.state = {
             mes:[],
             value:'',
          };
        };
       componentDidMount(){
        fetch(url).then(function(response){
            return response
        }).then(function (response) {
            return response.json()
        }).then((data)=>{
            this.setState({mes:data})
        })
        }
        handleChange(event) {
            this.setState({value: event.target.value});
         }
        subFunction(props) {
            const id=props.user_id;
            vk.callMethod('messages.send', {
                 user_id: id,
                 message: this.state.value
             })
             .then(function (response) {
                 console.log('Success: ' + JSON.stringify(response));
             })
             .catch(function (error) {
                 console.log('Fail: ' + JSON.stringify(error));
              });
        }
        render() {
            return (
                <div className="mp_dt_vk_list_mes_wr">
                {this.state.mes.map((index)=>
                    (
                        <div className="vk_message_wrap" key={index.message_id}>
                            <div className="vk_info_wr">
                                <div className="vk_image">
                                    <img className="circle" src={index.image_url}>

                                    </img>
                                </div>
                                <div className="vk_mes_username_wr">
                                    {index.last_name}
                                    {index.first_name}
                                </div>
                            </div>
                            <div className="vk_content">
                                <div className="vk_mes_date">
                                     {index.message_date}
                                </div>
                                <div className="vk_title">
                                    {index.message_title}
                                </div>
                                <div className="vk_body">
                                    {index.message_body}
                                </div>
                                <form className="col s12">
                                <div className="row">
                                     <div className="input-field col s12">
                                         <textarea id="textarea1" className="materialize-textarea" value={this.state.value} onChange={this.handleChange.bind(this)}/>
                                         <label htmlFor="textarea1">
                                             Ответ
                                         </label>
                                     </div>
                                </div>
                                    <button className="vk_mess_button btn waves-effect waves-light blue darken-3" onClick={this.subFunction.bind(this,index)}>
                                        Отправить
                                    </button>
                                </form>
                            </div>
                        </div>
                    )
              )
                }
            </div>
            );
        }
    }
ReactDOM.render(<Message/>, document.getElementById('containercustom'));

When processing componentDidMount , I get a list of all messages, then I pass them to Message through a map with the output of the title, date, username, etc. After entering the response in the textarea, on clicking the button, the subFunction function should be processed, which sends the response through the send.messages method. And here a snag arises - the method does not work out, or the request passes through time. After several clicks, one message may be sent, or nothing happens at all. I checked whether the method works if it is called with the same parameters, but separately, if you leave one button and process the click event - everything works fine. I suspect that the reason is working with the state of the component - when the button is clicked, the component is re-rendered, perhaps the request is not carried out.
Can anyone explain to me what is the reason for this behavior and where I am wrong.

Answer 1

The issue with an unreasonable click-to-render was resolved after the tag was removed from the component. After that, everything worked, messages are sent. I still can’t understand the exact reason for this behavior and how it is connected with the form. Just like I didn’t read that react somehow renders it in a special way. Otherwise, I checked the code for the absence of other possible connected scripts that could interact with the tag - there is nothing. For lack of another solution, I'll leave this as an answer.

Answer 2

Let's assume that everything is ok with subFunction .
But then what should happen? Your component is mounted ( componentDidMount happened), it doesn’t react to changing props in any way (I don’t see componentWillReceiveProps in the code ), I also don’t see anything being passed to the parent. Conclusion: you call subFunction, it does its job and that's it.