Send Data to a Server using Fetch API in React Native

I want to send data of Contact Form[firstname,lastname,email,note] to a server but When I click Contact Button to Send data I got an e=Error Telling that firstname is not defined The mean that all the 5 variables not defined if Some Can Help This The Code of FormScreen.js:

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  SafeAreaView,
  Keyboard,
  ScrollView,
  Alert,
} from 'react-native';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';
import Input from '../src/views/components/Input';
import Loader from '../src/views/components/Loader';

const ContactForm = ({navigation}) => {
  const [inputs, setInputs] = React.useState({
    firstname: '',
    lastname: '',
    email: '',
    note: '',
  });
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);

  const validate = () => {
    Keyboard.dismiss();
    let isValid = true;

    if (!inputs.firstname) {
      handleError('Please input first name', 'firstname');
      isValid = false;
    }

    if (!inputs.lastname) {
      handleError('Please input last name', 'lastname');
      isValid = false;
    }

    if (!inputs.email) {
      handleError('Please input email', 'email');
      isValid = false;
    } else if (!inputs.email.match(/S+@S+.S+/)) {
      handleError('Please input a valid email', 'email');
      isValid = false;
    }
    if (!inputs.note) {
      handleError('Please input note', 'note');
      isValid = false;
    }

    if (isValid) {
      submitData();
    }
  };
  const submitData = ()=>{
          fetch("https://flow.simpsimp.ai:2021/react/contact",{
              method:"post",
              headers:{
                'Content-Type': 'application/json'
              },
              body:JSON.stringify({

                firstname,
                lastname,
                email,
                note
              })
          })
          .then(res=>res.json())
          .then(data=>{
              alert(`${data.firstname} is saved successfuly`);
              props.navigation.navigate("Home")
          })
          .catch(err=>{
            alert("someting went wrong")
        })

    };



  const handleOnchange = (text, input) => {
    setInputs(prevState => ({...prevState, [input]: text}));
  };
  const handleError = (error, input) => {
    setErrors(prevState => ({...prevState, [input]: error}));
  };
  return (
    <SafeAreaView style={{backgroundColor: COLORS.white, flex: 1}}>
      <Loader visible={loading} />
      <ScrollView
        contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
        <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold'}}>
          Contact us
        </Text>
        <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10}}>
          Enter Your Details to Contact us
        </Text>
        <View style={{marginVertical: 20}}>

          <Input
            onChangeText={text => handleOnchange(text, 'firstname')}
            onFocus={() => handleError(null, 'firstname')}
            iconName="account-outline"
            label="First Name"
            placeholder="Enter your first name"
            error={errors.firstname}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'lastname')}
            onFocus={() => handleError(null, 'lastname')}
            iconName="account-outline"
            label="Last Name"
            placeholder="Enter your last name"
            error={errors.lastname}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'email')}
            onFocus={() => handleError(null, 'email')}
            iconName="email-outline"
            label="Email"
            placeholder="Enter your email address"
            error={errors.email}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'note')}
            onFocus={() => handleError(null, 'note')}
            iconName="note-outline"
            label="Note"
            placeholder="Enter your note"
            error={errors.note}
          />


          <Button title="Contact Us" onPress={validate} />

        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default ContactForm;

This is The Error : enter image description here

Answer

It is because you never defined the variables in the body:

      body: JSON.stringify({
        firstname: inputs.firstname,
        lastname: inputs.lastname,
        email: inputs.email,
        note: inputs.note,
      }),

Use this part as the body