ListInput value property preventing editing

Questions
1

Hi

I’m trying to use a textarea type React element in my app. However, if I set the ‘value’ property on the component to any string, I am then prevented from editing the text in the textarea. It seems to be locked to whatever the ‘value’ property is set to originally. This seems to be the case if ‘value’ is a fixed string or a variable in curly braces.

I would expect the ‘value’ property to update as I type new text. Is this not how it works? My code is as follows:

<Popover id="options-popover">
   <List>
   <ListInput
   ref={this.jsonlistinputref}
   value="Test Value"
   onInput={(e) => this.statejson = e.target.value}
   label="JSON"
   type="textarea"
   placeholder="Insert JSON State Data"
   >
   </ListInput>
   <ListButton title="Update" onClick={this.updateJSON.bind(this)}/>
   </List>
</Popover>

Thanks.
Mark

2

In React, you must bind input’s value: value={this.statejson}

3

I’ve tried this but it still does not allow editing in the textarea. The contents are just locked to whatever this.statejson is initialized to originally.

Anything else I need to do?

Thanks.

4

Hi

Any ideas on this one? I still can’t get it to work once value is set.

Thanks.

5

This is how it need to be done in react:

onInput={(e) => this.setState({statejson: e.target.value})}
6

Thanks - that worked!