Why does this return a null even though I specified the value?

Question

The code below returns null even though I specified a specific value. I believe the issue lies in the fact that document.getelementbyid('userInput') is apparently returning null, but I dont think this is 100% the case. Thanks

import React  from 'react'
import { withRouteData, Link } from 'react-static'
//
export default withRouteData(({ currencies }) => (
<div> 

  <Link to="/">Quoinex</Link>
  <Link to="/qryptos"><b>Qryptos</b></Link>
  <form id="form">
    <input type="text" name="name" placeholder="BTC etc." id="userInput" value="BTC" />
    <input className="sub" type="submit" />
  </form>
  <h1>Tokens</h1>
  <br />
  <table className="myTable">
    <tr>
      <th>Crypto/Token</th>
      <th>Min Withdrawal Qty</th>
      <th>Min Order Qty</th>
    </tr>
    { currencies.filter(currency => currency.currency === document.getElementById('userInput').value).map(currency => (
      <tr key={currency.currency}>
        <td id="tokenName">{currency.currency}</td>
        <td>{currency.minimum_withdrawal}</td>
        <td>{currency.minimum_order_quantity}</td> 
      </tr>
    ))}
  </table>

</div>
))

Answer 1

Instead of document.getElementById you can try with ref and get the value.

export default withRouteData(({ currencies }) => (
<div> 

  <Link to="/">Quoinex</Link>
  <Link to="/qryptos"><b>Qryptos</b></Link>
  <form id="form">
    <input type="text" name="name" placeholder="BTC etc." id="userInput" ref="userInput" value="BTC" />
    <input className="sub" type="submit" />
  </form>
  <h1>Tokens</h1>
  <br />
  <table className="myTable">
    <tr>
      <th>Crypto/Token</th>
      <th>Min Withdrawal Qty</th>
      <th>Min Order Qty</th>
    </tr>
    { currencies.filter(currency => currency.currency === React.findDOMNode(this.refs.userInput).value).map(currency => (
      <tr key={currency.currency}>
        <td id="tokenName">{currency.currency}</td>
        <td>{currency.minimum_withdrawal}</td>
        <td>{currency.minimum_order_quantity}</td> 
      </tr>
    ))}
  </table>

</div>
))