[FIXED] How to create auto growing-shrinking input by using React?

Issue

I need an input that will have min width and max width and it will grow and shrink according to its content

id='dv4'>

Solution

The only thing I changed in my Input component is the size attribute that depends on the value.length My solution:

type InputValue = string;
export function Input(props: InputProps): JSX.Element {
    const { type, placeholder, className = '', id, name, before, after } = props;
    const [value, changeValue] = useState<InputValue>('');
    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
        changeValue(event.target.value);
    }
    return (
        <>
            {before}
            <input
                /* I have added only this line: */
                size={value.length}
                type={type}
                name={name}
                placeholder={placeholder}
                className={`input ${className}`}
                id={id}
                value={value}
                onChange={handleChange}
            />
            {after}
        </>
    );
}

Answered By - FreePhoenix888
Answer Checked By - - Mary Flores (ReactFix Volunteer)