How to return a function within a function and display it in return

user11395273

This is my state

    constructor(props) {
    super(props);
    this.state = {
        fToC: '',

And this is my function

    handleChange = async (value) => {
    this.setState({ value });
    await Axios.get(`http://dataservice.accuweather.com/`).then((res) => {
        this.setState({ weather: res.data });

        console.log('weather_Temperature:' + this.state.weather.DailyForecasts[0].Temperature.Maximum.Value);

  >>>>>> function FToC(fahrenheit) { <<<<<<<<<<<<<<< 
            let fTemp = fahrenheit;
            let fToCel = (fTemp - 32) * 5 / 9;
            let message = fTemp + '\xB0F is ' + fToCel + '\xB0C.';
            console.log('message' + message);
        } FToC(this.state.weather.DailyForecasts[0].Temperature.Maximum.Value);
        this.setState({ FToC })

And here I want to return the result of the function

        <p class="card-text">{this.state.FToC}</p>

The Error:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Roman Unt

So problem is you are trying to render a function which was set to the state

You need to return a value from your FToC function and then invoke it in setState method

setState({fToC: FToC(this.state.weather.DailyForecasts[0].Temperature.Maximum.Value))

Btw, this.setState({ FToC }) creates another field (FToC) in your state, you already have fToC

Code below should works well

handleChange = async (value) => {
    this.setState({ value });
    await Axios.get(`http://dataservice.accuweather.com/`).then((res) => {
        this.setState({ weather: res.data });

        console.log('weather_Temperature:' + this.state.weather.DailyForecasts[0].Temperature.Maximum.Value);

  function FToC(fahrenheit) {
            let fTemp = fahrenheit;
            let fToCel = (fTemp - 32) * 5 / 9;
            let message = fTemp + '\xB0F is ' + fToCel + '\xB0C.';
            return message;
        } ;
        this.setState({ fToC: FToC(this.state.weather.DailyForecasts[0].Temperature.Maximum.Value) }) ```

Collected from the Internet

Please contact [email protected] to delete if infringement.