#StackBounty: #reactjs #validation #input #formik How to get the length of material UI input filed in React JS?

Bounty: 50

I am trying to enable the button when the material input text length is more than 0.

This is a material input field component.

const MaterialInput = ({
    name,
    id = name,
    select,
    options = [],
    type,
    label,
    shrink,
    formik,
    disabled,
    handleClick,
}) => {
    return (
        <TextField
            type={type}
            name={name}
            label={label}
            select={select}
            autoComplete='off'
            variant='outlined'
            disabled={disabled}
            className='material-input'
            value={get(formik.values, name, '')}
            onBlur={formik.handleBlur}
            onChange={formik.handleChange}
            helperText={get(formik.touched, name) && get(formik.errors, name)}
            error={get(formik.touched, name) && Boolean(get(formik.errors, name))}
            InputLabelProps={{ shrink }}
        >
            {options.map((item) => (
                <MenuItem
                    onClick={handleClick}
                    className='text-capitalize'
                    value={item.value}
                    key={item.value}
                    disabled={item.disabled || false}
                >
                    {item.label}
                </MenuItem>
            ))}
        </TextField>
    );
};

This is how I am using it in other components.

aComponent.js

                <MaterialInput name={inputName} label={label} formik={typeofForm} />

How to Enable button when the length of text field is more than 0.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.