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?

score 3 · Accepted Answer · answered Jun 20 '19 at 14:58

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',
  },
});

thank you!!! I modified the onPress event to make it work as a toggle, onPress={() => { setRunning(!isRunning); }} — Robson, Jun 20 '19 at 15:11

score 0 · Answer 2 · answered Jun 20 '19 at 15:14

I found another way, that requires a new class but I prefer Ian Steban Vasco's answer.

the solution that I found out was to create a new component that will hold the "state" for the Countdown component, then use the MyCountdown component in the main method instead of directly using the Countdown 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 class MyCountdown extends React.Component{
    state = {
        running: false
    };
    handleOnPress = () =>{
        this.setState({running:!this.state.running});
    }
    render(){
        return (
            <CountDown
                until={60}
                size={30}
                //onFinish={() => alert('Finished')}
                digitStyle={{backgroundColor: '#FFF'}}
                digitTxtStyle={{color: '#1CC625'}}
                timeToShow={['M', 'S']}
                timeLabels={{m: '', s: ''}}
                showSeparator={true}      
                onPress={this.handleOnPress}
                running={this.state.running}
              />
        );
    }
}

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

2 Answers2