Rendering Form builder duplicates component palette on setState

[perman26]

duplicates component palette after changing state because of re render.

[randallknutson]

Can you provide a form or some steps to reproduce this?

[perman26]

import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';

class App extends Component {

onChangeFormBuilder(schema){
 this.setState({ schema: schema });
}

  render() {
    return (
      <div className="App">
        <FormBuilder 
			form={{ display: 'form' }} 
			onChange={(schema) => this.onChangeFormBuilder(schema)} />
      </div>
    );
  }
}
export default App;

When we change state after onchange, it duplicates component palette

[sireeshav]

@perman26 Did u get the solution? I need it too

[perman26]

No Solution yet.... I feel this is happening in react version of formio only, in angular and vanilla javascript builder working fine

[vishaldenzil]

Even am also facing the same problem. Even i need it too.

[sireeshav]

@perman26 @vishaldenzil For now im doing this /* to hide duplicate component pallettes */ .formcomponents{ display: none; } .formcomponents:first-child{ display: initial; }

[vishaldenzil]

@sireeshav thank you, Am passing the data to form builder "form" props . If i pass through through api its not taking that data.

 <FormBuilder 
    form={this.state.form} 
    onChange={this.handleData}
    />

If i set to form state through constructor its displaying the form . If i set through setState its giving the problem. I can say its not rendering again .

[ghost]

Same issue with me. If state is set onChange then multiple pallets appear.

https://github.com/formio/react-formio/issues/228

This might help you as well.

[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!