[FIXED] Why I'm getting Functions are not valid as a React child?

Issue

Here is QuoteScreen component, could anyone please tell me why I'm getting Functions are not valid as a React child warning?

I understand this is a warning and app is running pretty fine with it. But this is annoying me and I would like to get rid of the warning. Please take a look what is going wrong here.

import {StyleSheet, Text, View} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import Greetings from './Greetings';

export default class QuoteScreen extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      quote: '',
    };
  }

  render() {
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 30,
      },
      alignRight: {
        textAlign: 'right',
      },
    });

    return (
      <View style={styles.container}>
        <Greetings name={this.state.name} />
        <Text>{this.state.quote.content}</Text>
        <Text style={styles.alignRight}>
          {this.state.quote.author ? ' - ' + this.state.quote.author : ''}
        </Text>
      </View>
    );
  }

  componentDidMount() {
    this.storeData();
    this.getData();
    this.fetchQuote().then(response => {
      this.setState({quote: response});
    });
  }

  storeData = async () => {
    try {
      await AsyncStorage.setItem('user_name', 'Simon Gomes');
    } catch (e) {
      // saving error
    }
  };
  getData = async () => {
    try {
      const value = await AsyncStorage.getItem('user_name');
      if (value !== null) {
        // value previously stored
        this.setState({name: value});
      }
    } catch (e) {
      // error reading value
    }
  };

  fetchQuote = async () => {
    try {
      let response = await fetch('https://api.quotable.io/random');
      let responseJson = await response.json();
      return responseJson;
    } catch (error) {
      console.error(error);
    }
  };
}

Solution

Got the error, its inside the greetings class, you have used greet a function in your render method and thats not allowed ,

const Greet = () => { let userTime = new Date().getHours(); if (userTime < 12) { return 'Good morning'; } else if (userTime < 18) { return 'Good afternoon'; } else { return 'Good evening'; } };

you have to use greet like ,

render() {
    return (
        <View>
            {this.Greet()}
        </View>
    )
}

and inside Greet function ,
you have to return strings as <Text>GoodMorning</Text> instead of just 'Good Morning'

Hope that helps, just ask if any doubts

Answered By - Gaurav Roy

Answer Checked By - Senaida (PHPFixing Volunteer)