Complete Converting Simple Input to Uncontrolled Component

[paniclater]

Simple input is currently partially converted to an uncontrolled component, but it still manages its internal text state.

This requires users to grab a dom ref of the input and manually clear it with a ref:

        this.searchRef.input.value = ''
        this.searchRef.input.focus()
        this.props.resetInstitutions()

The component should be converted to handle either case: controlled or uncontrolled or both, but not be in the current situation where it is partially controlled and partially uncontrolled.

[markstewy]

@paniclater Am I understanding this issue correctly?

SimpleInput.js
control input value by assigning it to props value and pass in a handlechange method via props to input's onChange event:

static propTypes ={
	handleInputChange: PropType.func,
	inputValue: PropTypes.string
}

<input
	onChange={e => this.props.handleInputChange(e)}
	value = this.props.inputValue
/>

static defaultProps = {
	inputValue = ‘’
}

ParentComponent.js
parent component will have to pass in the handle change method and setState on inputValue

let parentHandleChange = (e) => {
	setState({
		searchTerm: e.target.value
	})
}

<SimpleInput 
	handleInputChange={this.parentHandleChange}
	inputValue={this.state.searchTerm}
/>

I have a feeling I completely misunderstood.