React Props updates but it does not reflect on the state | SoloLearn: Learn to code for FREE!


React Props updates but it does not reflect on the state

Hello, I am practicing React and I am stuck with this issue. The component property updates but it doesn't render the recent change. Even the state is not aware of the recent change. //Parent Component render() { const qqfReservationForm = { position: "relative", fontFamily: "Helvetica, Arial, sans-serif", boxShadow: "0px 0px 25px 0px #333", backgroundColor: "whitesmoke", width: 600, borderRadius: 3, overflow: "hidden", border: "2px solid blue", }; return ( <form onSubmit={(e) => this.handleSumit(e)} name="qqfReservationForm" id="qqfReservationForm" style={qqfReservationForm} > {this.getFormTitle()} <FormStep stepPosition={this.state.currentFormTab} /> {this.getNavigationButton()} </form> ); } //child component render() { //console.log("constructor state is => ", this.state); const qqfWrapper = { width: 3000, border: "1px solid red", display: "flex", transform: `translate3d(${this.props.stepPosition},0,0)`, }; console.log("form step is ", qqfWrapper); return <div style={qqfWrapper}>{this.getFormStep()}</div>; }

7/29/2020 12:44:33 PM

Otuokwu Israel

7 Answers

New Answer


Otuokwu Israel we don't share long codes directly on the text message, use code playground or github for multiple files sharing.


Otuokwu Israel you're welcome. Btw, you may consider using styled-component, since you style all components using inline css. styled-component uses true css (not js object), and ensure all css are all broswers supported, remove unused selectors and it can implemented with scss directly. Check it out.


Otuokwu Israel I think you have forgotten to add 'px' to the transform: translate3d. Try transform: `translate3d(${this.props.stepPosition}px,0,0)`


Many thanks Calvin👏👏👏


I afraid we can't help you, if you do not show the complete codes.


Each time I click the next button, it updates the state and sends the state.currentFormTab to FormStep component. FormStep Component receives the value but it doesn't update the view. I can see that via console that the was received/updated but it doesn't update/display the updated/recent view


Hello Calvin below is a link to the code on playground