diff --git a/challenges/03-front-end-libraries/react.json b/challenges/03-front-end-libraries/react.json index 2c5f07887a..c7707f1534 100644 --- a/challenges/03-front-end-libraries/react.json +++ b/challenges/03-front-end-libraries/react.json @@ -2080,7 +2080,7 @@ "title": "Create a Controlled Input", "releasedOn": "December 25, 2017", "description": [ - "Your application may have more complex interactions between state and the rendered UI. For example, form control elements for text input, such as input and textarea, maintain their own state in the DOM as the user types. With React, you can move this mutatable state into a React component's state. The user's input becomes part of the application state, so React controls the value of that input field. Typically, if you have React components with input fields the user can type into, it will be a controlled input form.", + "Your application may have more complex interactions between state and the rendered UI. For example, form control elements for text input, such as input and textarea, maintain their own state in the DOM as the user types. With React, you can move this mutable state into a React component's state. The user's input becomes part of the application state, so React controls the value of that input field. Typically, if you have React components with input fields the user can type into, it will be a controlled input form.", "
", "The code editor has the skeleton of a component called ControlledInput to create a controlled input element. The component's state is already initialized with an input property that holds an empty string. This value represents the text a user types into the input field.", "First, create a method called handleChange() that has a parameter called event. When the method is called, it receives an event object that contains a string of text from the input element. You can access this string with event.target.value inside the method. Update the input property of the component's state with this new string.",