A component is changing a controlled input of type text to be uncontrolled

Question

Here are my snippets of code that have to do with this:

Parent:

class PropertyBar extends Component {
  state = {
    selectedCell: graph.selectedCell,
    cellProperties: []
  }

  updateSelectedCell() {
    if (graph.selectedCell != null) {
      this.setState({
        selectedCell: graph.selectedCell,
        cellProperties: Array.from(graph.selectedCell.value.attributes)
      });
    }
  }

  onChangeHandler = (e) => {
    console.log(e.target.value);
    let cellProperties = [...this.state.cellProperties];
    cellProperties[parseInt(e.target.id)] = e.target.value;
    this.setState({cellProperties});
  }

  renderPropertyList() {
    return this.state.cellProperties.map((key, i) => {
      return <PropertyBarItem name={key.nodeName} value={key.nodeValue} onChange={this.onChangeHandler} key={i} id={i} />
    })
  }

Child:

class PropertyBarItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ListItem divider={true} className="property-bar-item">
        <TextField
          id={this.props.id.toString()}
          label={this.props.name}
          value={this.props.value}
          margin="dense"
          onChange={(e) => this.props.onChange(e)}
        />
      </ListItem>
    )
  }
}

When I try to change the value of <TextField>, it loses the original label that was paired to it, and I think any relation it had to the Parent components state.

Then I get this error: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

I understand this might be due to my cellProperties state being an empty array in the beginning, but my Child components don't render until there are actually values within the array. I have done a ternary operation for the value field like value={this.props.value ? this.props.value : ""}, but then it always returns an empty string when I try to type.

Pierre Pierre · Accepted Answer · 2018-08-14T22:51:51

So the answer to my problem was that since I was converting a NamedNodeMap to an Array, I forgot to add the property I was changing within my array in my state.

So instead of cellProperties[parseInt(e.target.id)] = e.target.value;, the correct value I should have been assigning to is cellProperties[parseInt(e.target.id)].nodeValue = e.target.value;.

Everything works as it should now!

A component is changing a controlled input of type text to be uncontrolled

1 Answers