I have a component that has an input field and button. I want to add an onclick handler on the button that uses the value of the input. I can do this with querySelector, or getElementbyId or having a parent form element, or changing the input to a component. But what I want to know is if there's a direct and easy way just to refence the element.

import React from "react";

export default class UserInput extends React.Component{
  constructor(props){
    super(props);
    this.doStuff = this.doStuff.bind(this);
  }

  doStuff(){
    const inputValue = document.getElementById('new-task').value // I want to replace this
    // do stuff
  }

  render(){
    return(
      <div id="user-input">
        <input type="text" id="new-task"></input>
        <button type="button" onClick={this.doStuff}>Do Stuff!</button>
      </div>
    )
  }
}