This article demonstrates How to Create a ColorPicker Component in React.
This code features two React components: ColorPicker.js
and App.js
, illustrating a simple color picker component and its integration into a larger React application. Let’s break down each part:
ColorPicker.js
import React from 'react';
const ColorPicker = (props) => {
const style = {
backgroundColor: props.selectedColor,
width: '100px',
height: '100px',
};
return (
<div>
<h2>Color Picker</h2>
<div style={style}></div>
<p>Selected Color: {props.selectedColor}</p>
</div>
);
};
export default ColorPicker;
In the ColorPicker
component, a functional component is defined that takes two props: selectedColor
and onColorChange
. Inside the component, an inline style object (style
) is created dynamically based on the selectedColor
prop, setting the background color, width, and height of a div
element. The rendered component includes a heading, a colored square (div
with the specified style), and a paragraph displaying the currently selected color.
App.js
// App.js
import React, { useState } from 'react';
import ColorPicker from './ColorPicker';
function App() {
const [selectedColor, setSelectedColor] = useState('#00ff00'); // Default color is green
// Handler function to update the selected color
const handleColorChange = (newColor) => {
setSelectedColor(newColor);
};
return (
<div className="App">
<ColorPicker selectedColor={selectedColor} onColorChange={handleColorChange} />
</div>
);
}
export default App;
Output

In the App
component, the ColorPicker
component is imported. The main application state includes a selectedColor
state variable and a handleColorChange
function to update the selected color. The ColorPicker
component is rendered within the main application, passing the selectedColor
state as a prop and the handleColorChange
function as a callback prop. This setup allows the color picker to display the current color and enables the user to change it through interaction.
In summary, this code demonstrates the implementation of a basic color picker component (ColorPicker.js
) and its integration into a React application (App.js
). Users can view and modify the selected color through the color picker interface, showcasing a fundamental aspect of dynamic user interfaces in React.
Further Reading
How to Create Class Components in React?
Examples of Array Functions in PHP
Exploring PHP Arrays: Tips and Tricks
Registration Form Using PDO in PHP
Inserting Information from Multiple CheckBox Selection in a Database Table in PHP
PHP Projects for Undergraduate Students
Architectural Constraints of REST API
Creating a Classified Ads Application in PHP
How to Create a Bar Chart in ReactJS?
- Angular
- ASP.NET
- C
- C#
- C++
- CSS
- Dot Net Framework
- HTML
- IoT
- Java
- JavaScript
- Kotlin
- PHP
- Power Bi
- Python
- Scratch 3.0
- TypeScript
- VB.NET
