React Native update placeholder of TextInput

Loading...

React Native update placeholder of TextInput

I'm trying to change the placeholder of a TextInput with setState. But this does not seem to work.
render() {
   return (
      
   );
}

If i try the above code with value attribute instead of placeholder it works fine. Is this behaviour not allowed or am I missing something ? 
Thank you.
Update
 constructor() {

    super();

    this.formSections = {
        first:{
            fields:['username', 'password', 'confirm password'],
            buttonText:'Next',
            buttonAction:() => this._loadNext()
        },
        second:{
            fields:['first name', 'last name', 'email'],
            buttonText:'Register',
            buttonAction:() => alert('registering with the server')
        }
    }

    this.state = {
        currentFormSection:'first'
    }

}

_loadNext() {

    this.setState({
        currentFormSection:'second'
    });

}

render() {

    return (

        
            
            

            

            
                
                    {this.formSections[this.state.currentFormSection].buttonText}
                
            

        

    );
}

What i'm trying to achieve here is using same text inputs for different form fields. Here the placeholder updates to blank. After setState the input field is blank with no value and no text. But if I type something to the input and erase it all, the updated placeholder appears.

Solutions/Answers:

Answer 1:

I have updated your code one more time. Just copy and paste this code. Firstly it shows username, password, confirm password and Next button. When you enter text in TextInputs and click on Next Button then It shows firstname, lastname, email and Register Button.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  Button
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {
    constructor() {
            super();
            this.formSections = {
                first:{
                    fields:['username', 'password', 'confirm password'],
                    buttonText:'Next',
                    buttonAction:() => this._loadNext()
                },
                second:{
                    fields:['first name', 'last name', 'email'],
                    buttonText:'Register',
                    buttonAction:() => alert('registering with the server')
                }
            }
            this.state = {
                valueOfFirstInput:'',
                valueOfSecondInput:'',
                valueOfThirdInput:'',
                currentFormSection:'first'
            }
        }

        _loadNext() {

            this.setState({
                valueOfFirstInput:'',
                valueOfSecondInput:'',
                valueOfThirdInput:'',
                currentFormSection:'second'
            });
        }

        render() {

            return (

                <View style={styles.container}>
                    <TextInput style={{width:200}}
                        placeholder={this.formSections[this.state.currentFormSection].fields[0]}
                        value = {this.state.valueOfFirstInput}
                        onChangeText={value => this.setState({ valueOfFirstInput: value })}
                    />
                    <TextInput style={{width:200}}
                        placeholder={this.formSections[this.state.currentFormSection].fields[1]}
                        value = {this.state.valueOfSecondInput}
                        onChangeText={value => this.setState({ valueOfSecondInput: value })}
                    />

                    <TextInput style={{width:200}}
                        placeholder={this.formSections[this.state.currentFormSection].fields[2]}
                        value = {this.state.valueOfThirdInput}
                       onChangeText={value => this.setState({ valueOfThirdInput: value })}
                    />

                    <TouchableOpacity
                        style={styles.formBtn}
                        onPress={this.formSections[this.state.currentFormSection].buttonAction}
                    >
                        <Text style={styles.formBtnText}>
                            {this.formSections[this.state.currentFormSection].buttonText}
                        </Text>
                    </TouchableOpacity>

                </View>

            );
        }
 }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#abcdef',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Try one more time. May be it helps you.

References

Loading...