如何在 React JS 中的 h1 中显示输入值

Question

I have one input which divides 2 number and gives value, so I want to display that value in h1 tag

 <input className='input' type="number" id="" placeholder='$' onChange={(evt) => {console.log(evt.target.value / coinId.price)}}/>

coinId.price is todays BTC price from API but it is not important at this point

here is code which gave me result in console log so any suggestions? Thanks.

Answer 1

You forgot the value attribute I think, and if you use React Hooks maybe you can do something like this :

import { useState } from "react";

const [inputValue, setInputValue] = useState("");

...


<input className="input" type="number" placeholder="$" onChange={(evt) => setInputValue(evt.target.value / coinId.price)} value={inputValue} />```

Answer 2

One of the methods that I can think of is that, by using useState, set a state like

const (myAns,setMyAns) = useState(0)

<input className='input' type="number" id="" placeholder='$' onChange={(evt) => {setMyAns(evt.target.value / coinId.price)}}/>

<h1>{myAns}</h1>

You can also use useEffect, so that whenever price of bitcoin is changed, you may get updated value.

Or

<h1><input className='input' type="number" id="" placeholder='$' onChange={(evt) => {setMyAns(evt.target.value / coinId.price)}} value={inputValue} /></h1>

For furthur reference if case, how to make a input field value in h1?