在事件React Native上更改文本

Question

I want to change some text when an event happens. But I don't know how to do it.

I saw some tutorials where people are creating a new component. But is this the way? Because it is one sentence of text that needs to be replaced.

This is my code, I have some text that is displayed. And underneath I am displaying an agenda. When I press an day (onDayPress) I want to replace the text inside the text key with the text printed in my console.log.

export default class App extends React.Component {
  render() {
    return (

      <View style={styles.container}>
          <Text style={styles.headline}>Januari 2018</Text>

          <Agenda
              onDayPress={(day)=>{
                  console.log(LocaleConfig.locales['nl'].monthNames[day.month - 1] + " " + day.year)
              />
      </View>
    );
  }
}

Can someone help me or point me in the right direction. Thank you.

Answer 1

You should use state to store the text. Initialize your state with the default value, then when user click on Agenda, change that text and render the same. Hope following code will help.

export default class App extends React.Component {
 constructor(args) {
   super(args);
   this.state = {
     text: 'Januari 2018'
   };
 }

 render() {
  const { text } = this.state;
  return (
  <View style={styles.container}>
      <Text style={styles.headline}>{text}</Text>
      <Agenda
          onDayPress={(day)=>{
              this.setState({
               text: LocaleConfig.locales['nl'].monthNames[day.month - 1] + " " + day.year
          });
      />
  </View>
  );
 }
}