Попытка отфильтровать это отображение криптовалют по имени. Почему код ниже не работает?

Question

По сути, при отправке формы я хотел бы взять это значение и передать его в функцию currencycies.filter. Где это говорит document.getElementById...

Когда он является

currency.currency === 'BTC'

это работает

Однако это не

currency.currency === document.getElementById('userInput')

Еще лучше было бы фильтровать форму в режиме реального времени, когда я печатаю, но для меня это кажется довольно сложной задачей.

Спасибо

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" onSubmit="return false;">
    <input type="text" name="name" placeholder="BTC etc." id="userInput"/>
    <input className="sub" type="submit" onClick="othername();" />
  </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')).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

Document метод getElementById() возвращает объект Element, представляющий элемент, свойство id которого соответствует указанной строке. (Взято из MDN)

следовательно, это нормальный объект Javascript, для того чтобы получить входное фактическое значение, к которому нужно обратиться

document.getElementById('userInput').value