Why use render() in reactjs?

Question

React

Initially it was like this

function App() {
  gettingWeather = async() => {
    const apiUrl = await 
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${apiKey}&units=metric`);
    const data = await apiUrl.json();
    console.log(data);
  }
  return (
    <div className="App">
      <Info />
      <Weather />
      <Form 
        weatherMethod={this.gettingWeather}
      />
    </div>
  );
}

It gave an error that the method gettingWeather is not defined.
Changed App to a class and added render() there:

class App extends React.Component {
  gettingWeather = async() => {
    const apiUrl = await 
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${apiKey}&units=metric`);
    const data = await apiUrl.json();
    console.log(data);
  }
  render() {
  return (
    <div className="App">
      <Info />
      <Weather />
      <Form 
        weatherMethod={this.gettingWeather}
      />
    </div>
  );
  }
}

In the end, it worked. Can you explain in what cases it is necessary to use function and in what cases class extends with render?

Answer 1

in the first case, you have an error in the line You are accessing the current function without linking it to the asynchronous method gettingWeather And about render here is the dock
weatherMethod={this.gettingWeather}