Ajax call in react native .Cant find variable: res

Question

I'm trying make a ajax request for my react native app to my node.js server but when I load the app on expo it gave me an error "Can't find variable: res".

import React from 'react'
    import {
        ScrollView,
        StyleSheet,
        View,
    } from 'react-native';
    import Card from '../components/Card'
    import CardList from '../components/CardList'
    
    export default class HomeScreen extends React.Component {
    
    
        constructor(props) {
            super(props);
            this.state = {
                error: null,
                isLoaded: false,
                items: []
            };
        }
    
        static navigationOptions = {
            title: 'Menu',
        };
        componentDidMount() {
            fetch("https://127.0.0.1:4001/menu")
                .then(res => res.json())
                .then(
                    (result) => {
                        this.setState({
                            isLoaded: true,
                            items: result.items
                        });
                    },
                    (error) => {
                        this.setState({
                            isLoaded: true,
                            error
                        });
                    }
                )
        }
    
    
        render() {
            if (res) {
                return <View><Text>Error: {error.message}</Text></View>;
            } else if (!isLoaded) {
                return <View><Text>Loading...</Text></View>;
            } else {
                return (
                    <View style={styles.container}>
                        <ScrollView style={styles.scrollViewContainer}>
                            <View >
                                <CardList title={'Pizzas'}>
                                    {pizza.map(pizza => (<Card style={styles.card} name={pizza.name} description={pizza.decs} />))}
                                </CardList>
                                <CardList title={'others'}>
                                    <Card style={styles.card} />
                                    <Card style={styles.card} />
                                    <Card style={styles.card} />
                                    <Card style={styles.card} />
                                    <Card style={styles.card} />
                                    <Card style={styles.card} />
                                    <Card style={styles.card} />
                                </CardList>
    
                            </View>
                        </ScrollView>
                        <View style={styles.headerContainer}></View>
                    </View>
                )
            }
        }
    }

I have tried the URL in postman and it worked fine

I copied this mostly out of https://reactjs.org/docs/faq-ajax.html

anything helps, thanks in advance

Answer 1

Error occurred because you are using res variable without declaration. In place of res inside render you need to use this.state.error inside if block.

You also need change pizza with this.state.items