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

Question

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.

if you should get result of any function, at first you should invoke it — WVFFLIFE
– WVFFLIFE, Commented Sep 27, 2019 at 13:14
If I run the function i will get new Error >>> (FToC is not a function) — user11395273
– user11395273, Commented Sep 27, 2019 at 13:17

Roman Unt · Accepted Answer · 2019-09-27 13:27:03Z

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) }) ```

WVFFLIFE · Accepted Answer · 2019-09-27 13:32:07Z

if I correctly understood the meaning of your wish. you code should look like this

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: null
    }
   }
    
    componentDidMount() {
      this.handleChange();
    }
    
    handleChange = async() => {
      await Axios.get(`http://dataservice.accuweather.com/`)
        .then((res) => {
          this.setState({ 
            weather: res.data 
          });
        }
    }
    
    FToC(fahrenheit) { 
            let fTemp = fahrenheit;
            let fToCel = (fTemp - 32) * 5 / 9;
            let message = fTemp + '\xB0F is ' + fToCel + '\xB0C.';
            
            return message;
    }
    
    render() {
      const {weather} = this.state;
      
      if (!weather) return <div>Loading...</div>
      
      return (
        <p class="card-text">{this.FToC(weather.DailyForecasts[0].Temperature.Maximum.Value)}</p> 
      )
    }
}

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related