> For the complete documentation index, see [llms.txt](https://giorgosart.gitbook.io/react-easy-edit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://giorgosart.gitbook.io/react-easy-edit/examples/custom-input-component.md).

# Custom Input Component

When using custom input components, they must be passed in as props, like so:

```jsx
<EasyEdit    
    type="text"
    onSave={() => {}}
    editComponent={<CustomInput />}    
    displayComponent={<CustomDisplay />}
/>
```

When defining a custom input component, the function `setParentValue` is injected into your custom component, which must be called in order to pass the desired value up to the parent `EasyEdit` component.

For example, if your component was a text field that needed to set the `EasyEdit` value as a user id based on a username entered, you would need to pass the id to `this.props.setParentValue` in order to get that value to the `EasyEdit` component.

e.g.

```jsx
// Inside your custom 
input​onChange(searchTerm) {
    getUserIdByUsername(searchTerm).then((userId) => {
    this.props.setParentValue(userId);
})}
```

[<br>](https://giorgosart.gitbook.io/react-easy-edit/props)