from component is not re-rendering from after changing props.form

[kalsi8]

I am using Form-component with preloaded form json it is not refreshing the form on changing the value of fromProp of the Form tag

code im using :
class App extends Component {

constructor(props) {
super(props);
this.state = { currentUrl: "5c80b71c6bdc0f69544b4e22/", lastValue: {} }
}
formSubmitted = (value) => {
if (value.nextFormId) {
this.setState({ currentUrl: value.nextFormId })
}
}
componentDidMount() {
fetch(this.props.baseURL + this.state.currentUrl).then(this.handleFormIoResponce)
}

handleFormIoResponce = (responce) => {
responce.json().then(value => {
console.log(value)
this.setState({ lastValue: value })
})
}

render() {
let data = ""
return (
<Form form={this.state.lastValue} url={this.props.baseURL + this.state.currentUrl} onSubmit={this.formSubmitted} />
);
}
}

export default App;

[randallknutson]

This should cause the redraw to work: https://github.com/formio/react-formio/blob/master/src/components/Form.js#L108

Is there something we are doing wrong there?

[kalsi8]

now I am using a workaround for this problem which little bit affects my code's performance:
constructor(props) {
super(props);
this.state = {
currentUrl: "5c80b71c6bdc0f69544b4e22",
lastValue: ""
}
}
formSubmitted = (value) => {
console.log("submitted", value)
fetch(this.props.baseURL + this.state.currentUrl + '/submission', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(value)
}).then((responce) => {
responce.json().then(value => {
console.log("value", value)
if (value.nextFormId) {
this.setState({
currentUrl: value.nextFormId, lastValue: ""
})
this.setState({
lastValue: value.nextForm
})
}
})
})
}
componentDidMount() {
fetch(this.props.baseURL + this.state.currentUrl).then(this.handleFormIoResponce)
}
handleFormIoResponce = (responce) => {
responce.json().then(value => {
this.setState({
lastValue: value
})
})
}
render() {
let data2 = this.state.lastValue;
if (data2 !== "") {
console.log("doing", data2)
return (

<Form form={data2}
url={this.props.baseURL + this.state.currentUrl}
onSubmit={this.formSubmitted} />

);
} else {
return

Data Empty

}
}

[kalsi8]

also, I want to put one more thing in your notice that the onSubmit is not emitting the event after hitting at the URL provided in (URL) prop to Form component it emits an event with a value of form data so, I am doing is manual in the above-mentioned code.

if you want to reach me you can mail me at [email protected]
I will reply to you with my phone number

With Regards
Shubham Kalsi

Have a good day
Happy Contributing!!

[randallknutson]

I'm still not sure what is going wrong here. If you'd like to contact [email protected] we can set up a support plan and get you a support call to resolve any issues you are having.

[kalsi8]

I have resolved the bug in your code by cloning the source code and making a change in one line( https://github.com/formio/react-formio/blob/master/src/components/Form.js#L108 )
previous:

110: this.formio = formio;
111: this.formio.form = form;

fix:

110: this.formio = formio;
111: this.formio.form = nextProps.form;

I have also forked and changed the file

[TanyaGashtold]

I am closing the issue as it was created too long ago and there are no new comments here. I hope it was resolved. If not, please reopen it. Thanks!

[bhawnasemwal123]

Hi, I am using Formio Builder and facing the same issue.
I am using FormBuilder in the react functional base component and am not able to re-render Formio Builder on state change.

[brendanbond]

hey @bhawnasemwal123 thanks for the heads up. I'm going to reopen this issue and make sure I include it in some changes that are coming soon

[brendanbond]

@bhawnasemwal123 can you try using the master branch (in which we've made some significant changes) and see if that resolves the issue?