Next.js Discord

Discord Forum

How to change the attribute of an element and actually make changes to the virtual DOM?

Unanswered
Greater Flamingo posted this in #help-forum
Open in Discord
Greater FlamingoOP
I was giving an interview and the interviewer asked me to write a code where I can make changes from the browser console.

const [inputNumber, setInputNumber] = useState<number>(0)
const [inputNumber2, setInputNumber2] = useState<number>(0)

    const handleSubmit = () => {
        alert(
            'First Number = ' + inputNumber + ' Second Number = ' + inputNumber2
        )
    }

    return (
        <div className='grid place-content-center h-screen w-screen gap-4'>
            <input
                type='number'
                className='text-black'
                onChange={(e) => setInputNumber(Number(e.target.value))}
                value={inputNumber}
            />
            <input
                type='number'
                className='text-black'
                onChange={(e) => setInputNumber2(Number(e.target.value))}
                value={inputNumber2}
            />
            <button
                className='bg-blue-400 hover:bg-blue-600 duration-200 disabled:bg-blue-400'
                disabled={!(inputNumber + inputNumber2 === 10)}
                onClick={handleSubmit}
            >
                Submit
            </button>
        </div>


So like, I want to add any value in the inputs but I have to make sure that the handleSubmit always fires, invalidating the logic for the disabled attribute

The interview is over but I am wondering if its even possible.

I know the question is more related to react but I was asked to do it in a next app

0 Replies