**React refs** are used to access the DOM or React elements that were created in the render method. According to the #key# official documentation:https://legacy.reactjs.org/docs/refs-and-the-dom.html #key#, refs should be used to:
1. Manage focus, media playback, or text selection.
2. Integrate with third-party DOM libraries.
3. Trigger animations.

![](/api/edpresso/shot/6307699941703680/image/5532559075180544)

Three ways used to create refs in React are:
* string refs (this method is deprecated)
* callback refs
* `createRef()` refs (this is a recent addition)

# Code
In the examples below, a ref is used to access the user input and set the background color to a specified color.

## 1. Using callbacks
The following code snippet demonstrates how a ref can be created using a callback:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';
export default class App extends React.Component{
  // The constructor
  constructor(props) {
    super(props);
    this.state = {color: '#B1A9D4' };

  }
  // The onSubmit handler. It uses a ref to access
  // the user input.
  onSubmit = () => {
   // When the user clicks submit after typing in a color,
    // the background color of the div is set to the specified
    // color.
    this.setState({color: this.back_color.value});
  }
  render() {
    return (
      <div style={{background: this.state.color}}>
        <div>
          <span>Background Color: </span>
          <input
            type="text"
            // Creating a ref using a callback. input is what
            // the user will enter
            ref={(input) => { this.back_color = input; }} />
        </div>
        <div>
        <input
          type="submit"
          value="Change color"
          onClick={this.onSubmit}
        />
         </div>
      </div>
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## 2. Using `createRef()`

Starting from version 16.3, React included a new `createRef()` method that can be used for creating refs. The following code snippet demonstrates how a ref can be created using the `createRef()` method:

import React from 'react';
export default class App extends React.Component{
// The constructor
  constructor(props) {
    super(props);
    this.state = {color: '#B1A9D4'};
    // Creating a ref using the React.createRef() method.
    this.col = React.createRef();

  }
  // The onSubmit handler. Itg uses a ref to access the user input
  onSubmit = () => {
    // When the user clicks submit after typing in a color,
    // the background color of the div is set to the specified
    // color. The ref created above is used
    this.setState({color: this.col.current.value});
  }
  render() {
    return (
      <div style={{background: this.state.color}}>
        <div>
          <span>Background Color: </span>
          <input
            type="text"
            ref={this.col}/>
        </div>
        <div>
        <input
          type="submit"
          value="Change color"
          onClick={this.onSubmit}
        />
         </div>
      </div>
    );
  }
}

What are React refs?

Refs in React access DOM elements. Use cases include managing focus and integrating third-party libraries. Create refs via callback or createRef().

What are React refs?

Code

1. Using callbacks

2. Using createRef()

2. Using `createRef()`