CODEWITHSUNDEEP
javascriptjquerycssreact-nativejsx
Saad Khan
Saad Khan

Reputation: 11

want to out put text according to text input value in react-native , conditional rendering

I am trying to make a dummy terminal in react-native which could output some Text based on the input .Then show on the screen , I dont know what I am doing wrong with the return so far i am successfull to have the input text value and render it but cant out the desired text 

  import React,{useState, Component,} from 'react';
import { Text, View,StyleSheet,TextInput, TouchableNativeFeedbackBase,} from 'react-native'; 
import Header from './components/Header';
export default class App extends Component{
    constructor(props){
  super(props);
  this.state={
    input_terminal:'',
}}input_validation=()=>{
  const {input_terminal} = this.state;
   if(input_terminal=== "s"){
     return <Text>
       Henlo
       </Text>
       }}render(){
  return (
          <View style={styles.screen}>
         <Header/>
           <View style={styles.txtinline}>
            <Text  style={styles.txxt}>
              terminal@user~$:
            </Text>
            <TextInput 
           nativeID="na"
            style={styles.txtinput}
            placeholder = "start from here "
            placeholderTextColor = "green"
            onChangeText={
              input_terminal => this.setState({input_terminal})
            }
           onSubmitEditing={(this.input_validation)
           }
            ></TextInput>
            </View>
          </View>
  );
}
}

Upvotes: 1

Views: 514

Answers (1)

Nikhil Asrani
Nikhil Asrani

Reputation: 111

If you want to display what you are inputting in the terminal, you can add the value of your state variable in your <Text> tag.

Something like this maybe, <Text style={styles.txxt}>terminal@user~$: {this.state.input_terminal}</Text>

Upvotes: 1

Related Questions