CODEWITHSUNDEEP
javascriptreactjsreact-native
ruben
ruben

Reputation: 77

react native - how to put value from TextInput field into the Text field

I'm very new to react native and i'm trying see if i can enter a string in the input field and then with the press of a button let it appear in the Text field beneath it.

I tried alert(this.state.PlaatsNaam) at the end of the handleSearchButtonPress function and after the second button press it shows the alert with the given input from before.

Thanks in advance!

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity, Image } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#405162',
    alignItems: 'center',
  },
  roundedButton: {
    borderRadius: 90,
  },
});

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      PlaatsNaam: '',
      PlaatsInput: '',
    };
  }

  handleSearchButtonPress = () => {
    this.setState({
      PlaatsNaam: this.state.PlaatsInput
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row', justifyContent: 'center', marginLeft: 60, marginRight: 60, marginTop: 50 }}>
          <TextInput value={this.state.PlaatsInput} onChangeText={(text) => this.setState({PlaatsInput: text})} autoCompleteType={"off"} style={{ flex: 4, textDecorationLine: 'none', color: '#ECF0F1', borderColor: 'white', borderBottomWidth: 1, marginBottom: 10 }} />
          <TouchableOpacity onPress={this.handleSearchButtonPress} style={{ borderTopEndRadius: 5, borderBottomRightRadius: 5, backgroundColor: '#16A085', height: 30, width: 40, alignItems: 'center' }}>
            <Icon color='#ECF0F1' size={20} name="search" style={{ textAlign: 'center', marginTop: 4 }} />
          </TouchableOpacity>
        </View>


        <View>
          <Text style={{ color: 'white', fontSize: 45, textAlign: 'center', marginTop: 20, marginBottom: 20 }}>{this.props.PlaatsInput}</Text>
        </View>


        <View style={{ alignItems: 'center' }}>
          <View style={{ borderTopLeftRadius: 25, borderTopRightRadius: 25, backgroundColor: "#2C3E50", width: 280, height: 180, alignItems: 'center' }}>
            <Text style={{ fontSize: 90, color: '#ECF0F1' }} > {this.props.Temp} </Text>
            <Text style={{ fontSize: 16, color: '#ECF0F1' }} > {this.props.MinMaxTemp} </Text>
            <Text style={{ fontSize: 16, color: '#ECF0F1' }} > {this.props.datum} </Text>
          </View>

          <View style={{ borderBottomLeftRadius: 25, borderBottomRightRadius: 25, backgroundColor: "#ECF0F1", width: 280, height: 240, alignItems: 'center', justifyContent: 'space-between' }}>
            <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 25 }} >{this.props.WindInfo}</Text>
            <Text style={{ fontSize: 20, textAlign: 'center' }} >{this.props.WeatherDetails}</Text>

            <View style={{ flexDirection: 'row', marginBottom: 25 }}>
              <Text style={{ fontSize: 20, marginRight: 50 }} >{this.props.SunriseTime}</Text>
              <Text style={{ fontSize: 20, marginLeft: 50 }} >{this.props.SunsetTime}</Text>
            </View>
          </View>
        </View>


        <View style={{ height: 70, width: 400, justifyContent: 'space-between', flexDirection: 'row', backgroundColor: '#ECF0F1', position: 'absolute', bottom: 0 }}>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={60} name="home" style={{ textAlign: 'center', marginTop: 7 }} /></TouchableOpacity>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={48} name="calendar-o" style={{ textAlign: 'center', marginTop: 10 }} /></TouchableOpacity>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={48} name="calendar" style={{ textAlign: 'center', marginTop: 10 }} /></TouchableOpacity>
          <TouchableOpacity style={{ backgroundColor: "#2C3E50", width: 98 }}><Icon color='#ECF0F1' size={50} name="cog" style={{ textAlign: 'center', marginTop: 10 }} /></TouchableOpacity>
        </View>
      </View>
    );
  }
}

Upvotes: 2

Views: 486

Answers (1)

Danny Buonocore
Danny Buonocore

Reputation: 3777

If it's updating your state properly you should just be able to write

<Text style={{ fontSize: 90, color: '#ECF0F1' }}>{this.state.PlaatsNaam}</Text>

I didn't run the code, but the logic is there

  1. Update temp state as text input changes
  2. Copy temp state to field that will be displayed on button click
  3. Now you just need to display it

Also, setState does not guarantee that the state will change immediately. That might be what's tripping you up with the alert.

Upvotes: 2

Related Questions