how can I display input value in h1 in React JS-CodePudding

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.

CodePudding user response：

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.

<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?

CodePudding user response：

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} />```