<!DOCTYPE html>
React.js Box Component Color Controlled via Text Field
Use the text field below to change the color of the box component:
function updateColor() {
const colorInput = document.getElementById(‘color-input’).value;
const colorBox = document.getElementById(‘color-box’);
colorBox.style.backgroundColor = colorInput;
}
In this HTML document, we have created a simple React.js application that allows the user to control the color of a box component using a text field. The user can enter a color name or hex code in the text field, and the color of the box component will update in real-time.
The input field has an id of color-input, and we have added an oninput event listener that calls the updateColor function whenever the user enters a new value in the text field.
The updateColor function retrieves the value of the text field, and then sets the backgroundColor style property of the box component with an id of color-box to the value entered by the user.
The box component is initially styled with a width and height of 100px, and a margin-top of 20px. The user can enter any valid color name or hex code in the text field to change the color of the box component.
This simple application demonstrates how React.js can be used to create interactive and dynamic user interfaces with just a few lines of code. The user can experiment with different colors and see the immediate results in the box component.
