[<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>]()
![30 Days of React banner](../images/30_days_of_react_banner_day_27.jpg)
# useRef
In this challenge we have covered, how to handle uncontrolled input data. In this section, we will use the useRef hooks to get input data or to access any DOM element in your React application.
The useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
In the following example, we see how to get data from input and access elements from the DOM tree using useRef hook.
## Getting Data from input
Let's get data from uncontrolled input element.
```js
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
const App = (props) => {
const ref = useRef(null)
const onClick = () => {
let value = ref.current.value
alert(value)
}
return (
<divclassName='App'>
<h1>How to use data from uncontrolled input using useRef</h1>
Don't touch the DOM when you develop a React application because React has its own way to manipulate the DOM using the virtual DOM. In case, we get interested to get some content from the DOM tree we can use the useRef hook. See the example:
```js
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
const App = (props) => {
const ref = useRef(null)
const onClick = () => {
let content = ref.current.textContent
alert(content)
console.log(content)
}
return (
<divclassName='App'>
<h1ref={ref}>How to getting content from the DOM tree</h1>
1. Develop the following [application](https://www.30daysofreact.com/day-27/hexadecimal-colors). The application generates 27 hexadecimal colors by default. If the generate button get clicked it will generate another new 27 hexadecimal colors.