Progressive Web Apps with React

React refs

Refs in React are a way to grab a particular DOM element. For those familiar with jQuery, refs bridge the gap between the React approach of creating elements with props and the jQuery approach of grabbing things from the DOM and manipulating them.

We can add a ref to any JSX element we want to use later (that we want to refer to later). Let's add one to our message container. The ref prop is always a function, which is called with the element in question, and then used to assign that element to a property of the component, as shown:

<div  id="message-container"  ref={element => {    this.messageContainer = element;  }}>

Inside our scrollToBottom method, we use ReactDOM.findDOMNode to grab the element in question (don't forget to import ...