React Component Prompt for Production Components
A structured prompt that writes a typed, accessible React component with props, states, and edge cases handled — with a real example.
Enhanced prompt — ready to use
ROLE You are a senior React developer with expertise in building efficient and reusable UI components. Your goal is to create a high-quality React component tailored to specific functionality and best practices. TASK Write a React component based on a clear and functional specification. Think through the component structure, props, state management, and styling step by step. Consider edge cases and potential reusability. CONTEXT The request is to develop a React component for a modern frontend application. The audience for the component is fellow developers who will read, maintain, and possibly extend the code. The domain is web development using React.js. REQUIREMENTS - Write a complete, functional React component with clear props and state management if needed. - Follow React best practices including component modularity, hooks use (if applicable), and clean JSX. - Consider edge cases to ensure robustness. - Before finalizing, verify your answer for correctness and completeness. OUTPUT FORMAT Provide the React component code in a well-formatted code block with comments explaining the key parts. Include a brief explanation of the component’s purpose and usage example.
That's what PromptAI produced from this vague prompt: “write a react component”
Example result
```jsx
import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
/**
* SearchableDropdown
*
* A reusable dropdown select component that supports searching/filtering options.
*
* Props:
* - options: Array of { value: string|number, label: string }
* The available options to select from.
* - value: string|number|null
* The currently selected option value.
* - onChange: (value: string|number|null) => void
* Callback when the selected option changes.
* - placeholder: string
* Input placeholder text when no option is selected.
* - disabled: boolean
* Whether the dropdown is disabled.
* - noOptionsText: string
* Text to show when no options match the search.
*
* Features:
* - Filters options as the user types.
* - Keyboard accessible (ArrowUp, ArrowDown, Enter, Escape).
* - Click outside closes the dropdown.
* - Controlled component (value & onChange).
*
* Usage Example:
* ```
* const options = [
* { value: 'apple', label: 'Apple' },
* { value: 'banana', label: 'Banana' },
* { value: 'orange', label: 'Orange' },
* ];
* const [selected, setSelected] = React.useState(null);
*
* <SearchableDropdown
* options={options}
* value={selected}
* onChange={setSelected}
* placeholder="Select a fruit"
* />
* ```
*/
const SearchableDropdown = ({
options,
value,
onChange,
placeholder = 'Select...',
disabled = false,
noOptionsText = 'No options found',
}) => {
const [isOpen, setIsOpen] = useState(false);
const [filter, setFilter] = useState('');
const [highlightIndex, setHighlightIndex] = useState(-1);
// Find the selected option to display label
const selectedOption = options.find(opt => opt.value === value) || null;
// Filter options based on the filter text (case-insensitive)
const filteredOptions = options.filter(opt =>
opt.label.toLowerCase().includes(filter.toLowerCase())
);
// Open dropdown and reset filter/highlight when clicking on input
const toggleDropdown = () => {
if (disabled) return;
setIsOpen(prev => {
if (!prev) {
setFilter('');
setHighlightIndex(-1);
}
return !prev;
});
};
// Close dropdown helper
const closeDropdown = useCallback(() => {
setIsOpen(false);
setFilter('');
setHighlightIndex(-1);
}, []);
// Handle option select
const handleSelect = (selectedVal) => {
if (disabled) return;
onChange(selectedVal);
closeDropdown();
};
// Keyboard navigation handler
const onKeyDown = (e) => {
if (!isOpen) {
if (e.key === 'ArrowDown' && !disabled) {
// Open dropdown on ArrowDown
e.preventDefault();
setIsOpen(true);
setHighlightIndex(0);
}
return;
}
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
setHighlightIndex((prev) => {
const next = prev + 1;
return next >= filteredOptions.length ? 0 : next;
});
break;
case 'ArrowUp':
e.preventDefault();
setHighlightIndex((prev) => {
const prevIndex = prev - 1;
return prevIndex < 0 ? filteredOptions.length - 1 : prevIndex;
});
break;
case 'Enter':
e.preventDefault();
if (highlightIndex >= 0 && highlightIndex < filteredOptions.length) {
handleSelect(filteredOptions[highlightIndex].value);
}
break;
case 'Escape':
e.preventDefault();
closeDropdown();
break;
default:
break;
}
};
// Close dropdown on click outside
useEffect(() => {
if (!isOpen) return;
const onClickOutside = (event) => {
if (!event.target.closest('.searchable-dropdown-container')) {
closeDropdown();
}
};
window.addEventListener('click', onClickOutside, true);
return () => window.removeEventListener('click', onClickOutside, true);
}, [isOpen, closeDropdown]);
return (
<div
className="searchable-dropdown-container"
style={{
position: 'relative',
width: '250px',
fontFamily: 'Arial, sans-serif',
userSelect: 'none',
}}
aria-haspopup="listbox"
aria-expanded={isOpen}
aria-disabled={disabled}
>
{/* Input box to show selected label and filter input */}
<div
tabIndex={disabled ? -1 : 0}
role="combobox"
aria-controls="searchable-dropdown-listbox"
aria-autocomplete="list"
aria-activedescendant={
highlightIndex >= 0 && isOpen
? `searchable-dropdown-option-${highlightIndex}`
: undefined
}
onClick={toggleDropdown}
onKeyDown={onKeyDown}
style={{
border: '1px solid #ccc',
padding: '8px 12px',
borderRadius: '4px',
backgroundColor: disabled ? '#f9f9f9' : 'white',
cursor: disabled ? 'not-allowed' : 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
{isOpen ? (
// When open, show input box for filtering
<input
type="text"
autoFocus
value={filter}
onChange={(e) => {
setFilter(e.target.value);
setHighlightIndex(0);
}}
onKeyDown={onKeyDown}
placeholder={placeholder}
disabled={disabled}
style={{
flexGrow: 1,
border: 'none',
outline: 'none',
fontSize: '1rem',
backgroundColor: 'transparent',
}}
aria-label="Filter options"
/>
) : (
// Show selected label or placeholder when closed
<span
style={{
color: selectedOption ? 'black' : '#888',
flexGrow: 1,
userSelect: 'none',
}}
>
{selectedOption ? selectedOption.label : placeholder}
</span>
)}
<span
aria-hidden="true"
style={{
marginLeft: '8px',
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent',
borderTop: isOpen ? 'none' : '5px solid #333',
borderBottom: isOpen ? '5px solid #333' : 'none',
transition: 'transformHow to adapt it
- •Name your stack (TypeScript, Tailwind, state library) so the output drops in cleanly.
- •List the states it must handle — loading, empty, error — or you'll get the happy path only.
Have your own rough prompt? Enhance it into a structured prompt like this in one click.
Enhance your own promptOr use the ChatGPT prompt enhancer right inside ChatGPT, or the prompt enhancer for Claude Code in your terminal.
More coding prompts
GitHub Actions Prompt for CI Workflows That Pass
A structured prompt that writes a GitHub Actions workflow — triggers, caching, matrix builds — with a real example YAML you can adapt.
Pull Request Description Prompt Reviewers Thank You For
A structured prompt that writes a PR description from your diff summary — what changed, why, how to test, and risks — with a real example.
System Design Prompt for Architecture Decisions
A structured prompt that produces a system design — components, data flow, storage, and trade-offs — instead of a vague architecture chat.
Web Scraping Prompt for Working Python Scrapers
A structured prompt that writes a Python scraper with selectors, pagination, and polite rate limits — plus a real example script.
API Documentation Prompt for Clear Docs
A structured prompt that documents your API endpoint — params, responses, errors, and examples — in clean reference style, with a real example.
Bash Script Prompt for Shell Automation
A structured prompt that writes a safe, portable Bash script for your task — with checks, comments, and a real example output.