How to modify a component's property in a function?

Question

I'm trying to learn react and how to use third party components, what I'm trying to do now is to use the component that I installed from https://www.npmjs.com/package/react-native-countdown-component

objective:

The Countdown component has a "Props" called "running" which I would like to modify when I "click" on the component.

code:

the code that I'm using is just a fresh new app created using "expo init MyApp", then I've pasted in the code to import and generate the component

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>

      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        onPress={() =>
          {
            this.setState({running:true});
          }}
          running={false}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

what is the correct way to modify the "running" property of the Countdown component when the component is clicked?

Answer 1

You can start using state properly. For this time I will use React Hooks, it's simpler than using the traditional functional or class components. See more

Every time state is updated, it will cause component to rerender with the new value.

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  const [isRunning, setRunning] = useState(false) //React Hooks
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        //When component is pressed, updates state to true
        onPress={() => { setRunning(true); }}
        running={isRunning} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});