CODEWITHSUNDEEP
javascriptreactjs
user11395273
user11395273

Reputation:

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

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.

Upvotes: 2

Views: 74

Answers (2)

WVFFLIFE
WVFFLIFE

Reputation: 266

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

Upvotes: 1

Roman Unt
Roman Unt

Reputation: 893

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

Upvotes: 3

Related Questions