| JSX | HTML | Notes |
|---|---|---|
| className | class | Used on most elements for CSS class assignment |
| htmlFor | for | Used on <label> to reference an associated input element |
| tabIndex | tabindex | Used on any focusable element to control keyboard navigation order |
| contentEditable | contenteditable | Used on any element to make its content editable |
| readOnly | readonly | Used on <input>, <textarea> to make them non-editable |
| maxLength | maxlength | Used on <input>, <textarea> to limit number of characters |
| autoComplete | autocomplete | Used on form fields to enable or disable autofill |
| spellCheck | spellcheck | Used on <input>, <textarea>, and content-editable elements |
| noValidate | novalidate | Used on <form> to disable native validation |
| formAction | formaction | Used on <button> or <input type="submit"> to override form action |
| crossOrigin | crossorigin | Used on <img>, <script>, <link>, <video>, etc. |
style — Object, not string. camelCase keys. Numbers auto-convert to px.
Units like %, em, vh must be strings: width: '100%'
Incorrect: style="color: red" (not valid JSX)
<div style={{ backgroundColor: 'red', fontSize: 20 }} />
key — Required in .map() to uniquely identify each item
{items.map(item => <li key={item.id}>{item.name}</li>)}
| JSX Event | Notes |
|---|---|
| onClick | Click handler |
| onChange | Input change |
| onSubmit | Form submission |
| onMouseEnter | Mouse enter |
| onMouseLeave | Mouse leave |
| onKeyDown / Up | Keyboard events |
| onInput | Fires on every keystroke (before onChange) |
<button onClick={() => alert("Clicked!")}>Click</button>
| JSX Prop | Use |
|---|---|
| value | Sets input value. Controlled by React state. Requires onChange. |
| defaultValue | Sets initial value. Used in uncontrolled components (no onChange) |
| checked | Boolean flag for checkbox or radio. Controlled by React state. Requires onChange. |
| defaultChecked | Sets initial checked state for uncontrolled checkboxes/radios. |
Controlled components
The input value is tied to React state, and updates via onChange.
const [text, setText] = useState('')
<input value={text} onChange={e => setText(e.target.value)} />
Uncontrolled components
React does not track the input value. You set the initial value only.