Necessary Concepts You Must Know to Build The Color Picker App

In this module, we will cover the essential React concepts that make our Color Picker App work. These include components, state with hooks, event handling, controlled inputs, arrays and mapping, conditional rendering, helper functions, and randomization logic.

Understanding these concepts will help you see how the app displays colors, blends palettes, and updates instantly based on user interactions.

1) Components

A React component is a reusable function that returns UI written in JSX. In our app, everything lives inside a single main component called App.

• The App component handles all the logic: user input, color picking, blending, and rendering the palette.
• It returns the full UI, including the input field, buttons, color display box, and palette grid.
• If the app grows larger, we could break it into smaller components (for example, ColorBox, Palette, or InputGroup) to organize the code better.

2) State and Hooks

React state lets the app “remember” values and automatically re-render when those values change. We use the useState hook to manage state.

Examples from our code:

const [input, setInput] = useState("");

const [color, setColor] = useState("#FF0000");

const [selectedPalette, setSelectedPalette] = useState([]);

• input stores what the user types in the text box.
• color keeps track of the currently displayed main color.
• selectedPalette is an array holding multiple colors if the user selects or blends them.

Whenever setInput, setColor, or setSelectedPalette are called, React updates the UI automatically.

3) Event Handling

Event handling allows our app to respond to user actions like typing, clicking, or submitting.

• Handling typing in the input box:

<input

type="text"

value={input}

onChange={handleInputChange}

/>

Here, handleInputChange updates state whenever the user types.

• Handling button clicks:

<button onClick={handlePickColor}>Pick Color</button>

<button onClick={handleRandomColor}>Surprise Me!</button>

handlePickColor processes the input (color names, hex codes, or blends).
handleRandomColor generates a random color or combination.

• Handling palette clicks: Clicking on a color box runs handlePaletteClick, which updates the selected palette and blends colors if multiple are chosen.

4) Controlled Inputs

Controlled inputs are fields whose value is tied to React state. This ensures the UI and logic always stay in sync.

For example:

<input

type="text"

value={input}

onChange={handleInputChange}

/>

• The value comes from input state.
• The onChange updates that state.

This makes it easy to reset the input, validate it, or use the value for color picking.

5) Arrays and Mapping

Arrays allow us to render multiple elements dynamically using map().

Rendering the full palette:

{Object.entries(colorNames).map(([name, hex]) => (

<div

key={name}

className="palette-color"

style={{ backgroundColor: hex }}

onClick={() => handlePaletteClick(hex.toUpperCase())}

> </div>

))}

This creates one small box for each color defined in colorNames.

Rendering the selected palette preview:

{selectedPalette.map((c, i) => (

<div key={i} className="palette-color-small" style={{ backgroundColor: c }}></div>

))}

This shows which colors the user has selected or blended.

6) Conditional Rendering

We only want to display certain parts of the UI when data exists. React makes this simple with conditional rendering.

Showing the selected palette preview only when the user has clicked colors:

{selectedPalette.length > 0 && (

<div className="selected-palette"> ... </div>

)}

If no palette is selected, this section doesn’t appear. This keeps the UI clean and relevant.

7) Helper Functions

We wrote small helper functions to process and blend colors. These are plain JavaScript functions but play an important role in the app.

• hexToRgb(hex) converts a hex code into RGB values.
• rgbToHex({ r, g, b }) converts RGB values back into a hex string.
• blendColors(colors) takes multiple hex codes, averages their RGB values, and returns a new blended color.

These functions allow us to support color mixing when the user enters input like "red + pink" or clicks multiple palette colors.

8) Randomization Logic

The “Surprise Me!” button adds fun interactivity by showing random colors.

const handleRandomColor = () => {

const allColors = Object.values(colorNames);

const count = Math.floor(Math.random() * 3) + 1; // 1 to 3 colors

const randomColors = [];

for (let i = 0; i < count; i++) {

const random = allColors[Math.floor(Math.random() * allColors.length)];

randomColors.push(random);

}

setSelectedPalette(randomColors);

setColor(blendColors(randomColors));

};

• It randomly picks 1 to 3 colors from the palette.
• If more than one color is chosen, it blends them automatically.
• The final color is displayed in the main box.