Thread by @tejinder_id

⚡️ Day 84 ⚡️

Today

- Made a little progress on my project using react + tailwindcss.

- Studied Controlled Components in React.

Let us discuss Controlled Components.

A Thread 🧵

#100DaysOfCode

{1/12}
What are Controlled Components ?

- Let us take an example of an HTML form.

i.e

<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>

In HTML, form elements naturally keep internal state.

{2/12}

For e.g -

- If you type the name in the input section and submit the button then the value of name will be submitted. so this is all controlled by HTML.

- If we do the above process using React then the process is called Controlled Component Process.

{3/12}

Advantages of Controlled Components.

- single source of truth i.e only one React is the source of control.

- We can apply the benefits of the framework to the element which is controlled.

{4/12}

Example of Controlled Component in React -

We will take the example of the above form element.

1. First we will make a class in which all-controlling action will take place.

i.e

class NameForm extends React.Component

where NameForm is a subclass of React.Component.

{5/12}

2. we have to preserve the current state and make onSubmit and onChange events so for all these we have to define the variable/function.

- we will define them inside the constructor.

{6/12}

- For example:-

constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

- super(props) means it is a subclass.

- this.state means a variable storing state.

{7/12}

-this.handleChange = this.handleChange.bind(this);

-this.handleSubmit = this.handleSubmit.bind(this);

The above are actions that we have to bind in React.

{8/12}

Let us discuss the onChange event of input.

- If the input is changing we have to store this in the current state.

This is done by "handleChange" that we have defined.

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

{9/12}

In the above, if any change in the input corresponding state will be updated.

- Next, we will make the onSubmit action.

handleSubmit(event) {
event.preventDefault();
}

{10/12}

In this example, we do not want any action to take place on submitting so we use the "event.preventDefault();" method which says that no action on submitting.

{11/12}
- Now we will write the form element.

see the snippet.

--> onSubmit={this.handleSubmit} this action call to handleSubmit function.

--> value={this.state.value} this action will keep the input.

--> onChange={this.handleChange} this action will call to handleChange.

{12/12}

⭐️ complete code snippets for reference purposes.

If you like this make sure to:

Follow me @tejinder_id for web development-related tweets.

Thank you so much for staying to the end of this thread.