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

0

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

+3

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

+2

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. https://code.sololearn.com/WzLuveC96k6d/?ref=app https://styled-components.com/docs/basics https://www.smashingmagazine.com/2020/07/styled-components-react/

+1

Otuokwu Israel I think you have forgotten to add 'px' to the transform: translate3d. Try transform: `translate3d(${this.props.stepPosition}px,0,0)` https://code.sololearn.com/Wu5WQZQxT4PP/?ref=app

+1

Many thanks Calvin👏👏👏

0

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

0

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 props.property was received/updated but it doesn't update/display the updated/recent view

0

Hello Calvin below is a link to the code on playground https://code.sololearn.com/W82ec1Npp0dF