CODEWITHSUNDEEP
react-native
tigerhoo
tigerhoo

Reputation: 89

TextInput Placeholder when using props

I am new to react native. I trying to use props to pass values into TextInput. However the placeholder was not appearing. Anyone can help point out what have gone wrong ?

'''

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

function App(){
  return(
  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1' }}>
   
  <InputWithLabel label="Emails"
  placeholder="add text here to see in place holder"
  placeholderTextColor="black"
  value=" " 
  />
  </View>
)};

function InputWithLabel(props){
  const {label,placeholder,value,onChangeText} = props;
  return (
    <View>
    <Text>{label}</Text>

    <TextInput 
    placeholder={placeholder}
    value={value} 
    onChangeText={onChangeText}/>
    </View>
  );
}
export default App;

'''

Upvotes: 0

Views: 482

Answers (2)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

You are sending value=" " prop which isn't empty, try sending empty prop like

<InputWithLabel
  .....
  .....
  value="" // this way 
/>

Upvotes: 1

James Anderbard
James Anderbard

Reputation: 494

Looks like the reason the placeholder is not showing is because the value is a single blank space. Try passing in null or an empty string to the value like this:

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

function App(){
  return(
  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1' }}>
   
  <InputWithLabel label="Emails"
  placeholder="add text here to see in place holder"
  placeholderTextColor="black"
  value=""
  />
  </View>
)};

function InputWithLabel(props){
  const {label,placeholder,value,onChangeText} = props;
  return (
    <View>
    <Text>{label}</Text>

    <TextInput 
    placeholder={placeholder}
    value={value} 
    onChangeText={onChangeText}/>
    </View>
  );
}
export default App;

Upvotes: 1

Related Questions