Custom Widget Value

I have created a custom Dropdown widget and in render I get the value as below – if undefined then setting the caption to whatever user sets it in widget General tab: const selectedCaption = this.props.enumAttribute.value === undefined ? this.props.stringCaption : this.props.enumAttribute.value; then pass this to my component : <Dropdown list={keyVals} caption={selectedCaption} onUpdate={this.onUpdateHandle} disabled={this.isReadOnly()} /> In my component I set it in as below and then set my html as well:   constructor(props: any) { super(props) this.state = { isDisplayed: false, titleCaption: this.props.caption, } } render(): ReactNode { const { titleCaption } = this.state <div className="ui-dropdown__placeholder">{titleCaption}</div> ... } But I get undefined for this.props.enumAttribute.value in “selectedCaption” const. I debugged it in chrome and can see the render method running twice, first time it is undefined and second time I get the value I selected, but component’s render only runs once and sets the value to this.props.stringCaption.
1 answers

Hi Samim,

Looking at the code snippet of your Dropdown component I see that in the constructor you are storing *initial* value of props passed to Dropdown to the components state and in the render method you are using `titleCaption` from the state. The state is never updated, so Dropdown always renders the same (initial) value for the title.

Consider using title form the props directly and not storing it in the state.

render(): ReactNode {
  const { caption } = this.props;
  return (<div className="ui-dropdown__placeholder">

Hope it helps!