I want to have a countdown component for my project. I tried by setting setInterval, but I have a requirement to pause and continue the timer. So How can I achieve this?
I created a jsfiddle with a simple demonstration of how it can be done: https://jsfiddle.net/69z2wepo/258601/. Written using React but the principle is exactly the same with React Native.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 10,
};
this.interval = null;
this.cleanUp = this.cleanUp.bind(this);
this.decreaseCounter = this.decreaseCounter.bind(this);
this.startCounter = this.startCounter.bind(this);
}
componentWillUnmount() {
cleanUp();
}
cleanUp() {
clearInterval(this.interval);
}
decreaseCounter() {
if (this.state.counter === 0) {
return this.cleanUp();
}
this.setState({counter: this.state.counter - 1});
}
startCounter() {
this.interval = setInterval(this.decreaseCounter, 1000);
}
render() {
return (
<div>
<button onClick={this.startCounter}>Start</button>
Counter {this.state.counter}
<button onClick={this.cleanUp}>Stop</button>
</div>
);
}
}
Related
im building a react native application ,still i have 2 screens
1.Enter mobile
2.Verify Otp
EnterUserInfo.js
class UserInfoInput extends Component {
constructor(props) {
super(props);
this.state = { formValid:true,
validMobileNumber:false,
.
.}}
componentWillReceiveProps(nextProps) {
if(nextProps.common.isFetching===false) {
this.props.navigation.navigate('VerifyOtpScreen')
.
.
} else {
this.setState({isLoading:true})
}}
onPressNext=()=> {
this.props.sendOtp(payload)}
render() {
return (<View/>)
}
}
}
function mapStateToProps(state) {
return {
common: state.common
}
}
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({ sendOtp }, dispatch)
}
}
export default connect(mapStateToProps,mapDispatchToProps)(UserInfoInput);
Here user enter the phone number ,and trigger an action sendOtp,response will be in the reducer and it will be available in the componentwillrecieveprops() lifecycle.
VerifyOtp.js
class VerifyOtp extends Component {
constructor(props) {
super(props);
this.state = { oneTimePIN: '' ,
.};
}
componentDidMount(){
this.setState({ phoneNumber:this.props.common.phone});
}
componentWillMount() {
setTimeout(() => {
this.setState({ isResendDisabled: false, opacity: 1 });
}, 30000);
}
componentWillReceiveProps(nextProps){
//do operation
}
onPressNext=()=>{
if(this.state.oneTimePIN=='') {
this.setState({showNotification:true})
}
else {
this.onSubmit()
}
}
onSubmit=()=>{
this.props.verifyOtp(payload)
}
onResendOtp=()=>{
this.props.sendOtp(payload,locationData)
this.setState({ isResendDisabled: true, opacity: 0.5 });
setTimeout(() => {
this.setState({ isResendDisabled: false, opacity: 1 });
}, 30000);
}
render() {
return (<View><Elements></View>)
}
}
function mapStateToProps(state) {
return {
common: state.common
}
}
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({ verifyOtp,sendOtp }, dispatch)
}
}
export default connect(mapStateToProps,mapDispatchToProps)(VerifyOtp);
VerifyOtp screen used to verify the otp.
The problem is,If i move back to enterUserinfo screen and move again to the verifyOtp screen im getting the warning message
'Warning: Can\'t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application
What is the reason for the warning , and how tackle the issue?
This happens when you call an async function followed by setstate.
A simple work around would be like this:
constructor(props) {
this.state = {
...
this.isCancelled: false
}
}
componentWillMount() {
setTimeout(() => {
!this.state.isCancelled && this.setState({ isResendDisabled: false,
opacity: 1 });
}, 30000);
}
and in componentWillUnmount
componentWillUnmount() {
// setting it true to avoid setState waring since componentWillMount is async
this.state.isCancelled = true;
}
I have a box containing a list. The list is made of todoItems. A delete button is next to each item. The button should call the delete method of the box class. Should I pass it to the class List first? Can I call directly the method in the class Box?
class TodoItem extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e)
{
const todoItemId = this.props.todoItemId;
if (!todoItemId)
{
return;
}
this.props.onTodoItemDeleteList({ todoItemId: todoItemId });
}
render() {
return (
<div className="todoItem">
<button onClick={() => this.handleClick()}>delete</button>;
</div>
);
}
}
My List: here the onTodoItemDeleteList is seen in the console, but appears as undefined.
class TodoItemList extends React.Component {
constructor(props) {
super(props);
this.handleItemDeleteList = this.handleItemDeleteList.bind(this);
}
handleItemDeleteList(todoItemId)
{
//call handleItemDelete
}
render() {
if (this.props.data)
{
var todoItemNodes = this.props.data.map(function (todoItem){
return (
<TodoItem todoItemId={todoItem.todoItemId} onTodoItemDeleteList={this.handleItemDeleteList} key={todoItem.todoItemId}>
</TodoItem>
);
});
}
return <div className="todoItemList">{todoItemNodes}</div>;
}
}
My Box: this is where I handle my ajax call to the server.
class TodoItemBox extends React.Component {
constructor(props) {
super(props);
this.state = { data: [] };
this.handleItemDelete = this.handleItemDelete.bind(this);
}
handleItemDelete(todoItemId) {
const data = new FormData();
data.append('todoItemId', todoItemId);
const xhr = new XMLHttpRequest();
xhr.open('post', this.props.deleteUrl, true);
xhr.onload = () => this.loadTodoItemsFromServer();
xhr.send(data);
}
render() {
return (
<div className="todoItemBox">
<TodoItemList data={this.state.data} />
</div>
);
}
}
I solved it by using arrow function in the parent too, it looks like this:
onTodoItemDeleteList={ (todoItemId) => handleItemDeleteList(todoItemId)}
and in the constructor:
handleItemDeleteList = this.handleItemDeleteList.bind(this);
In my application, I created a timer component. This is a smart component because I wanted to handle the counter state inside the component.
this is my code
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import { RoundedButton} from "../../mixing/UI";
class Timer extends Component {
constructor(props) {
super(props);
this.state = {
counter: 30
}
this.interval = null;
}
componentWillUnmount() {
cleanUp();
}
cleanUp = () => {
clearInterval(this.interval);
}
decreaseCounter = () => {
if (this.state.counter === 0) {
return this.cleanUp();
}
this.setState({counter: this.state.counter - 1});
}
startCounter = () => {
this.interval = setInterval(this.decreaseCounter, 1000);
}
render() {
return (
<View>
<RoundedButton text='Log in' onPress={() => this.startCounter()} />
<Text>{this.state.counter}</Text>
<RoundedButton text='Log in' onPress={() => this.cleanUp()} />
</View>
);
}
}
// styles
const styles = StyleSheet.create({
});
export default Timer;
Now I want to call this from my parent screen. If I pass the counter as a prop,
Now the counter state can't be handled from Timer component. How can I handle the state of the child based on the parent prop.
you can use react component lifecycle componentDidMount()
componentDidMount(){
this.setState({counter: this.props.counter});
}
There after you can use this.setState({counter: this.state.counter - 1})
let say I have a state like this:
constructor(props) {
super(props);
this.state = {
FirstTime:
{
foo: 'ex1'
}
}
}
and then I setState the FirstTime to add another key/value:
this.setState({FirstTime: {...this.state.FirstTime, bar: 'ex2'}})
there's a way to change the initial state to be like this:
constructor(props) {
super(props);
this.state = {
FirstTime:
{
foo: 'ex1',
bar: 'ex2'
}
}
}
when I reloaded the apps?
Try something like this
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
FirstTime: {
foo: 'ex1'
}
}
}
render() {
console.log(this.state.FirstTime); //Sorry a typo found in this line
return (
<div>Hey</div>
);
}
componentDidMount() {
let obj = {
bar: 'ex2'
}
let finalData = { ...this.state.FirstTime, ...obj }
this.setState({ FirstTime: finalData })
}
}
const rootElement = document.getElementById("root")
ReactDOM.render(
<App />,
rootElement
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
I have tried storing DatePickerIOS dates with redux.
Is there a way to use AsyncStorage? I have been trying with no luck so far. Are there any suggestions on how to use AsyncStorage with a simple DatePickerIOS component?
<DatePickerIOS
style={{ paddingTop: 110 }}
mode='date'
date={this.state.d}
onDateChange={(d) => this.onDateChange(d)}
/>
constructor(props) {
this.state = { date: newDate() };
}
onDateChange(d) {
this.setState({
d: d
});
You set the state for the d variable in onDateChange but you use the startDate variable in the DatePickerIOS.
Take a look at this, didn't tested in app but should work.
export class PickerIOS extends React.Component {
constructor() {
super();
this.state = {
pickedDate: null
}
}
componentWillMount() {
getData('date')
.then((date) => {
if (date != null)
this.setState({pickedDate: date})
else
this.setState({pickedDate: new Date()})
})
}
onDateChange(date) {
setData('date', date)
this.setState({pickedDate: date})
}
render() {
return (
<DatePickerIOS
mode='date'
date={this.state.pickedDate}
onDateChange={(date) => this.onDateChange(date)}
/>
);
}
}
and then, for code organisation, in another file:
setData(key, data) {
try {
await AsyncStorage.setItem(key, data);
} catch (error) {
// Error saving data
}
}
getData(key) {
try {
const value = await AsyncStorage.getItem(key);
if (value !== null){
return value
}
} catch (error) {
// Error retrieving data
}
}