What are controlled components?

A ReactJS component that controls the input elements within the forms on subsequent user input is called “Controlled component”. i.e, every state mutation will have an associated handler function.

For example, to write all the names in uppercase letters, we use handleChange as below,

handleChange(event) {
    this.setState({
        value: event.target.value.toUpperCase()
    });
}