Error registering user in database with Nodejs + React Native

Question

I’m not getting past the values I put in TextInput for the data set.

When I click the button for the object to be sent to DB, the object sent will be empty, this is the answer of console.log:

Object {
  "__v": 0,
  "_id": "5e4422f5c6fc7b323c71db52",
}

I am using Node.js in the backend with Axios. The code is below:

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';

import api from '../services/api';

function CadastroChild({ navigation }){

    const [name, setName] = useState('');
    const [idade, setIdade] = useState('');
    const [peso, setPeso] = useState('');
    const [comprimento, setComprimento] = useState('');
    const [temperatura, setTemperatura] = useState('');

    async function addChild(e){
        e.preventDefault();

        const response = await api.post('/children', {
            name,
            idade,
            peso,
            comprimento,
            temperatura
        })

        console.log(response.data);

    }

    return(
        <View style={styles.container}>
        <View style={styles.childForm}>
            <Text style={styles.textInput}>Nome Completo:</Text>
            <TextInput 
                style={styles.childInput}
                placeholder="Nome da criança"
                placeholderTextColor="#999"
                autoCapitalize="words"
                autoCorrect={false}
                required
                value={name}
                onChange={e => setName(e.target.value)}
            />
            <Text style={styles.textInput}>Idade:</Text>
            <TextInput 
                style={styles.childInput}
                placeholder="Digite a idade"
                placeholderTextColor="#999"
                keyboardType="numeric"
                required
                value={idade}
                onChange={e => setIdade(e.target.value)}
            />
            <Text style={styles.textInput}>Peso (kg):</Text>
            <TextInput 
                style={styles.childInput}
                placeholder="Digite o peso"
                placeholderTextColor="#999"
                keyboardType="numeric"
                required
                value={peso}
                onChange={e => setPeso(e.target.value)}
            />
            <Text style={styles.textInput}>Comprimento (m):</Text>
            <TextInput 
                style={styles.childInput}
                placeholder="Digite o comprimento"
                placeholderTextColor="#999"
                keyboardType="numeric"
                required
                value={comprimento}
                onChange={e => setComprimento(e.target.value)}
            />
            <Text style={styles.textInput}>Temperatura (ºC):</Text>
            <TextInput 
                style={styles.childInput}
                placeholder="Digite a temperatura"
                placeholderTextColor="#999"
                keyboardType="numeric"
                required
                value={temperatura}
                onChange={e => setTemperatura(e.target.value)}
            />
        </View>
        <View style={styles.viewButton}>
            <TouchableOpacity 
                style={styles.goButton}
                onPress={() => { 
                    addChild();
                    navigation.navigate('Menu'); 
                }} 
            ><Text style={styles.textButton}>Cadastrar</Text>
            </TouchableOpacity>
        </View>
        </View>

    );
}

const styles = StyleSheet.create({...})

export default CadastroChild;

Answer 1

as I don’t have your api, so I’ll assume that (name, age, ...) is what’s in your api

//a1,a2... you can change it to another name

const [a1, setName] = useState('');
const [a2, setIdade] = useState('');
const [a3, setPeso] = useState('');
const [a4, setComprimento] = useState('');
const [a5, setTemperatura] = useState('');

const response = await api.post('/children', {
   name: a1,
   idade: a2,
   peso: a3,
   comprimento: a4,
   temperatura: a5  
})

Changes the value and onChange of all

<TextInput value={a1} onChange={setName}
<TextInput value={a2} onChange={setIdade}
<TextInput value={a3} onChange={setPeso}
<TextInput value={a4} onChange={setComprimento}
<TextInput value={a5} onChange={setTemperatura}