How to enforce two way communication between components in ReactJS?

Question

JavaScript

Hello, I
have a class and a function:

import React from 'react';

export default class ResultsContainer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      //хочу получить в state ответ с myFunction
      response: ''
    };
  }

  componentDidMount = () => {
    const a=1;
    myFunction(a);
  }

  render() {
    return (
      <div>
      ...
      </div>
    )
  }
}

const myFunction = (props) => {
  const {a} = props;
  const response = a++
    return (
      response
    )
}

How to pass a variable from a class to a function and then pass the response from the function to the state of the class?

Answer 1

1. Declaring componentDidMount as an arrow function is insanity. It doesn't make any sense.
2. If your function is executed synchronously, it is enough to reduce to:

const response = myFunction(1);
this.setState({ response });

3. If asynchronous:

componentDidMount() {
  const { someValue } = this.props;
  // асинхронный вызов, возвращающий Promise
  fetchSomeData(someValue).then(response => this.setState({ response }));
}

or:

async componentDidMount() {
  const { someValue } = this.props;
  // асинхронный вызов, возвращающий Promise
  const response = await fetchSomeData(someValue);

  this.setState({ response }));
}

4. The myFunction function itself is written very poorly and contains an error. It is better:
const myFunction = num => ++num;

Answer 2

componentDidMount = () => {
    const a=1;
    this.setState({response: myFunction(a)});
}

If the function is asynchronous:

async componentDidMount = () => {
    const a=1;
    this.setState({response: await myFunction(a)});
}