Controlled components in React

March 15, 2021

Controlled components, simply put, is the react way of handling the form data and user input.

It isn’t the only way of managing the form data, but it is one of the better ways.

The basic idea here is that every input element will be mapped to an object/field in the component’s state. And whenever the user changes some input, the component’s state directly gets changed. So at any point, you’ll have all the the form input data residing in your component’s state.

constructor{
	super(props)
	this.state = {
		name:"",

	}
}

Functional way of creating controlled components

function Form()=>{
	const [name, setName]= React.useState("");
	const [checked, setChecked] = React.useState(false);

	return({

	})
}

Written by Gagandeep Rangi who likes to talk about himself in third person. Twitter Instagram