React Props updates but it does not reflect on the state

Question

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>;
}

Answer 1

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

Answer 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/

Answer 3

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

Answer 4

Many thanks Calvin👏👏👏

Answer 5

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

Answer 6

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

Answer 7

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