Input Field is not Editable – React JS Fix

If the value of your input field is not changing or editable, then you can try the following solution. This may happen when your field doesn’t have an onChange event or the value attribute is not updating. Consider the below one as your sample component. Since the value attribute is not updating, it’s not possible to edit the given input field.

import React, { useState } from 'react';

const App = () => {
    const [input, setInput] = useState('')
    return(
        <div>
            <input type="text" value={input} />
        </div>
    )
}
export default App

You can solve this by adding an onChange event and the value attribute to the input field. In this way, it’s possible to control the value of input fields in the React application. You can check the below example where I’m doing the same.

import React, { useState } from 'react';

const App = () => {

    const [input, setInput] = useState('')

    const changeHandle = e => {
        setInput(e.target.value)
    }

    return(
        <div>
            <input type="text" value={input} onChange={changeHandle} />
        </div>
    )
}

export default App

Here, I’m updating the value of our input field on every user inputs. Hence, the input field will be editable for the users and also we can access the value of user input anywhere in our component.

Similar Posts

Leave a Reply