DEV Community

Walktheworld
Walktheworld

Posted on

Controlled Components

A controlled component is a component that renders form elements and controls them by keeping the form data in the component's state.

A controlled form is a form that gets its input values from the state.

Let's take a look at what that looks like:

First, we need to create a component that has an initial state. In this case, I use an empty string as my initial colorInput state:
component state

Then, we render the form to the page to make sure that everything is connected properly (don't forget to import it to your main container and add to to the render lifecycle) :
render

Next, we need to handle the change of state, so we will implement a handleColorInput function for our in-line onChange event, and tell the style to change the color of the text from the state:

So here is the whole code:
whole code

and this is what that code returns:
input form input form input form input form

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay