## React DOM (R2R)
🔹 *parent* [[❞ React Fundamentals (R2R)|React Fundamentals (R2R)]]
🔸*prev* [[❜ Component Instantiation|Component Instantiation]] *next* [[❜ React Props|React Props]] | [[❞ React State|React State]]
### React DOM
ReactDOM component will render HTML using two arguments, the component to render, and where in the HTML to place it. In this case, using a node element.
```js
import * as React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root')
);
```
Now we can add an event handler into the search component so that it will trigger an event listener when the search field is used.
```js
const Search = () => {
const handleChange = (event) => {
console.log(event.target.value);
};
return (
<div>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onChange={handleChange} />
</div>
);
};
```
**Important Note:** Always pass functions to these handlers, not the return value of the function, except when the return value *is a function*. This is a well-known source of bugs for beginners in React.
Instead of
```js
<input
id="search"
type="text"
onChange={handleChange()}
/>
```
Do this
```js
<input
id="search"
type="text"
onChange={handleChange}
/>
```