At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve:
I am seeking to place elements (such as text or icon images) both before and after an input field, positioned beside the input itself instead of being absolute at the end of the container like in the referenced post. The goal is to ensure these additional components remain immutable to the user while leaving the input value unaffected.
Here is an excerpt of my code:
const ProductPrice = () => {
const [info, setInfo] = useState({
discountPrice: '',
});
const handleChange = (e) => {
const value = e.target.value
setInfo({
...info,
[e.target.name]: value
})
}
return (
<div className='price-container'>
<input
name='discountPrice'
type='number'
placeholder=''
onChange={handleChange}
value={info.discountPrice}
/>
</div>
);
};
Furthermore, here is a visual representation of the desired outcome: https://i.sstatic.net/UN7c2.png