add placeholder to input in react js-CodePudding

I have an input field, in which I want to add in the placeholder ' tonnes' when the user enters a number. So this is what I came up with for that:

<input tabIndex={isBig ? "0" : "-1" } placeholder="in tonnes" value={plantDetail.co2ReleasedPerYear   ' tonnes'} onChange={(e) => setCO2(e.target.value)} className="specify-detail-inp"/>

But this adds in tonnes after each character. For example, if the user wants to enter 99, it shows up as '9 tonnes9 tonnes', whereas I want it to show up as '99 tonnes'. How can I fix this? I also tried slicing the text from the end as mentioned here -> Is there a way in react native to have a permanent placeholder inside of a text input?, but it didn't work.

CodePudding user response：

Changing from

onChange={(e) => setCO2(e.target.value)}

onChange={(e) => setCO2(e.target.value.replace(' tonnes', ''))}

Could be one way to solve the problem, however i don't think its the best way. Best way in my honest opinion, would be to just have (tonnes) written in input label.