render is not calling on state change

Question

export default class TopMiddleLoadingView extends React.Component{

    size = 66;

    constructor(props) {
        super(props);
        this.state = {
            fill : 99,
            timeLeft : props.timeLeft
        }
    }

    onPress(){
        this.setState = {
            ...this.state, fill:10
        }
    }

    componentWillUpdate(nextProps, nextState) {
        alert("componentWillUpdate");
    }

    render(){
        alert("render")
        return(
            <View style={{width:this.size, height:this.size}}>
                <View style={[styles.absoluteCenter,{zIndex:999}]}>
                    <Thumbnail source={Images.seaImg}></Thumbnail>
                </View>
                <Text>{this.state.fill}</Text>
                <Button
                    style={{width:50,height:50,backgroundColor:"red",position:"absolute",zIndex:999}}
                    onPress={this.onPress}
                ></Button>
            </View>
        );
    }
}

on button press, onPress function is clicked, and change the state of the component, but the render function is not calling. I am very new to react native. Any idea?

score 1 · Accepted Answer · answered Oct 31 '17 at 07:43

You aren't changing the state either let alone re render. And if you want to re render then you should change state using setState() method. Also, you need to refresh you javascript this knowledge

export default class TopMiddleLoadingView extends React.Component{

    size = 66;

    constructor(props) {
        super(props);
        this.state = {
            fill : 99,
            timeLeft : props.timeLeft
        }
    }

    onPress = () => {
        this.setState({fill:10})
    }

    componentWillUpdate(nextProps, nextState) {
        alert("componentWillUpdate");
    }

    render(){
        alert("render")
        return(
            <View style={{width:this.size, height:this.size}}>
                <View style={[styles.absoluteCenter,{zIndex:999}]}>
                    <Thumbnail source={Images.seaImg}></Thumbnail>
                </View>
                <Text>{this.state.fill}</Text>
                <Button
                    style={{width:50,height:50,backgroundColor:"red",position:"absolute",zIndex:999}}
                    onPress={this.onPress}
                ></Button>
            </View>
        );
    }
}

sareek · Answer 2 · 2019-12-24T08:26:26.770

Render method is called whenever there is change in state of that component. You should use this.setState({...this.state, fill:10} for updating state of the component. This must cause render function to fire again, if there is not any other logic written inside shouldComponentUpdate() for conditional rendering.

Hope this helps. Also check out, What the difference of this.state and this.setstate in ReactJS?

render is not calling on state change

2 Answers2