CODEWITHSUNDEEP
javascriptarraysreact-native
wein
wein

Reputation: 3

Cannot display array in React Native

When i press the <TouchableOpacity> Button, i want the value 'abc' to be appended to the array selectedTags and then <Text> {this.list()} </Text> will print out my array.
But now when i press the Button, nothing display out.

Can anybody know what is the problem with my code?

export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          selectedTags: []
        }
  }

  list() {
  return this.state.selectedTags.map(function(tags, i){
    return(
      <View key={i}>
        <Text>{tags.name}</Text>
      </View>
    );
  });
}

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity  onPress={() => this.state.selectedTags.push('abc')} key = {1} style={styles.buttonContainer}>
              <Text style={styles.buttonText}> Button </Text>
         </TouchableOpacity>

          <Text> {this.list()} </Text>
      </View>
    );
  }
}

Upvotes: 0

Views: 161

Answers (2)

Prince
Prince

Reputation: 851

The function list only push data in array but does not rerender the view, todo so you have to use setState or forceUpdate.

You can implement the onpress function like this.

onPress = () =>{
  this.state.selectedTags.push("abc");
  this.setState({selectedTags : this.state.selectedTags});
}

Upvotes: 1

Apolo
Apolo

Reputation: 4050

This is because you never call setState, which would trigger re-render of your component.

instead of using:

onPress={() => this.state.selectedTags.push('abc')}

try:

onPress={() => this.setState({selectedTags: this.state.selectedTags.concat('abc')})}

Upvotes: 1

Related Questions