Input Values Only Return Undefined in React Native

I am pretty new to react native and am trying to get the home page of my first basic app to load. Currently, it asks users to input their "name" and "networth" and I simply want to return the networth input multiplied by a constant with an alert that appears after pressing submit saying "{name} +" net worth will be " + {newNetworth} +" next year!". However right now my output is: "undefined will be worth undefined next year!" and I cannot figure out for the life of me how to get the actual values to pass through.

Here is my child component:

    import React from 'react';import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';class OpeningPageQs extends React.Component {    state = {    name: '',    networth: 0,    newNetworth: 0}nextYearWorth() {     this.setState({        name: this.state.name,        newNetworth: this.state.networth * 1.1    });return (alert(this.name +' will be worth '+ this.newNetworth +' next year!'));}    render (){        return (<View><TextInput style= { styles.input }                placeholder= "name"                onChangeText= { this.name }            /><TextInput style= { styles.input }                placeholder= 'networth'                onChangeText= { this.networth }            /><TouchableOpacity style = {styles.submitButton}            onPress = {                () =>  this.nextYearWorth(this.state.name, this.state.networth)            }><Text style={styles.submitButtonText}>                Submit</Text></TouchableOpacity> </View>        )    }}const styles = StyleSheet.create({    container: {        paddingTop: 23    },    input: {        margin: 15,        height: 40,        borderColor: '#7a42f4',        borderWidth: 1    },    submitButton: {        backgroundColor: '#7a42f4',        padding: 10,        margin: 15,        height: 40,     },     submitButtonText: {         color: 'white'     }})export default OpeningPageQs;

And here is my Parent component:

 import { StatusBar } from 'expo-status-bar';import React, { useState, Component } from 'react';import { StyleSheet, Text, View } from 'react-native';import OpeningPageQs from './components/OpeningPageQs';    export default class App extends React.Component {      constructor (props){        super(props);    //building initial state for input props        this.state = {          name: '',          networth: this.networth         };         }      render(){      return (<View style={styles.container}><StatusBar style="auto" /><OpeningPageQs           name={this.state.name}          networth={this.state.networth}           /></View>      );      }    }    const styles = StyleSheet.create({      container: {        flex: 1,        backgroundColor: '#fff',        alignItems: 'center',        justifyContent: 'center',      },    });

Any help would be greatly appreciated