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:


import React from 'react';
const ColorPicker = (props) => {
  const style = {
    backgroundColor: props.selectedColor,
    width: '100px',
    height: '100px',
  return (
      <h2>Color Picker</h2>
      <div style={style}></div>
      <p>Selected Color: {props.selectedColor}</p>
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

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) => {

  return (
    <div className="App">
      <ColorPicker selectedColor={selectedColor} onColorChange={handleColorChange} />

export default App;


An Example Demonstrating How to Create a ColorPicker Component in React
An Example Demonstrating How to Create a ColorPicker Component in React

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

Introduction to React JS

How to Create Class Components in React?

Examples of Array Functions in PHP

Exploring PHP Arrays: Tips and Tricks

Basic Programs in PHP

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

REST API Concepts

Creating a Classified Ads Application in PHP

How to Create a Bar Chart in ReactJS?