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.
or write yours rough and click once
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: 'transform
How 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 in one click.
Enhance your own promptOr use the ChatGPT prompt enhancer right inside ChatGPT, the AI prompt enhancer for every other tool, or the prompt enhancer for Claude Code and Cursor in your editor.
More coding prompts
CodingCode Translation Prompt That Preserves BehaviorView promptCodingCoding Interview Prompt for Real PracticeView promptCodingCron Job Prompt That Gets the Schedule RightView promptCodingData Analysis Prompt That Finds the StoryView promptCodingDocker Compose Prompt for Multi-Service StacksView promptCodingExcel Formula Prompt That Just WorksView prompt