react native textinput takes the value from another textinput - react-native

Question

when I enter the number of items in the textInput Item number, i hope the price of the item automatically appears in the textIinput Price.
here is my quick script that won't work
please help me to improve, thank you
constructor(props){
super(props);
this.state={
qty: 0,
prc: 0,
}
}
price = () =>{
var price = this.state.qty * 250;
this.setState({
prc: price,
})
}
render(){
return (
<View style={styles.container}>
.....
<View style={{...}}>
<Text style={{...}}>Item number :</Text>
<TextInput
...
onChangeText={(entry) => {
this.setState({qty: entry})
this.price();
}}
...
/>
</View>
<View style={{...}}>
<Text style={{...}}>Price :</Text>
<TextInput
....
value={this.state.prc}
onChangeText={(entry) => {
this.setState({prc: entry})
}}
....
/>
</View>
</View>

Answer 1

Modify your code like below
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Item number :</Text>
<TextInput
value={this.state.qty}
onChangeText={(entry) => {
this.setState({
qty: entry,
prc: entry * 250
})
}}
/>
<Text>Price :</Text>
<TextInput
value={this.state.prc}
onChangeText={(entry) => {
this.setState({
prc: entry
})
}}
/>
</View>
If you really want to use function price provide it as a callback function.
<TextInput
value={this.state.qty}
onChangeText={(entry) => {
this.setState({
qty: entry
}, () => this.price())
}}
/>
Edit - I have added a sample application check this
import React, { Component } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
export default class Example extends Component {
state = {
qty: 0,
prc: 0,
}
price = () => {
let price = this.state.qty * 250;
this.setState({
prc: price,
})
}
render() {
return (
<View style={styles.container}>
<Text>Item number :</Text>
<TextInput
value={this.state.qty}
onChangeText={(entry) => {
this.setState({
qty: entry
}, () => this.price())
}}
/>
<Text>Price :</Text>
<TextInput
value={this.state.prc}
onChangeText={(entry) => {
this.setState({
prc: entry
})
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});
Hope this helps you. Feel free for doubts.

Answer 2

import React, { Component, useState } from 'react';
import { View, Text, TextInput } from 'react-native';
export default Example = () => {
const [price, setprice] = useState(0);
return (
<View>
<Text>Item number :</Text>
<TextInput
onChangeText={(entry) => setprice(entry)}
/>
<Text>Price :</Text>
<TextInput defaultValue={(parseInt(price) * 250).toString()}></TextInput>
</View>
);
}