Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Creating a text Input in react with a "value" makes it read only?

I have the following function

function CreateTextInput({ id, placeholder, defaultValue, value }) {    
        return (
            <input
                type="text"
                name={id}
                placeholder={placeholder}
                defaultValue={defaultValue}
                value={value}
            //onChange={onChange}
            />
        );
    }

I call it like this:

Use like this: <CreateTextInput id="fieldID1" defaultValue="fieldDefaultValue" value="fieldValue" />

But it results in the field becoming read only. as in I can select the value in the field, but cant edit it. When I don’t have the "value" parameter in there, then it’s editable.

I know I could use defaultValue instead, but was just experimenting. Just wondering if this is normal behavior?

AND, in the case of setting the value on create of the object, what’s the difference between defaultValue and value anyway?

Tags:

4

Answers


  1. 0

    You have to use useState.

    import {useState} from 'react';

export default function yourComponent(){
const [value,setValue] = useState("")

return (
            <input
                type="text"
                name={id}
                placeholder={placeholder}
                defaultValue={defaultValue}
                value={value}
                onChange={(e)=>setValue(e.target.value)}
            />
        );
}
    Login or Signup to reply.
  2. 0

    The problem is that when you edit what’s in the box the new value doesn’t replace the value. You need to use the onChange handler and update the value with the new value — and it needs to be observable i.e., stored in state.

    Login or Signup to reply.
  3. 0

    You can use the attribute readOnly
    when value is not undefined (you can remove it or explicitly set it to undefined), the input become controlled component (the value of it is from the value attribute)
    Other cases, the input use the default value attribute, and you can edit it (if there is no readOnly attribute)

    <input value={undefined} defaultValue="default" readOnly />
    Login or Signup to reply.
  4. 0

    Just wondering if this is normal behavior?

    Yes, this is expected behavior:

    If you pass value without onChange, it will be impossible to type into
    the input. When you control an input by passing some value to it, you
    force it to always have the value you passed. So if you pass a state
    variable as a value but forget to update that state variable
    synchronously during the onChange event handler, React will revert the
    input after every keystroke back to the value that you specified.

    So when you provide a value prop, your input will reflect the value supplied in that prop, thus it becomes read-only unless you update the value prop accordingly with onChange. By doing that, you’re making your input a controlled input.

    AND, in the case of setting the value on create of the object, what’s
    the difference between defaultValue and value anyway?

    If you provide a value then there is typically no need to provide a defaultValue as well, as your defaultValue will be overwritten by what you specify in the value prop:

    ReactDOM.createRoot(document.body).render(
  <input type="text" value="used" defaultValue="not used" />
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

    In the example case above, it’s only if value becomes undefined or null where defaultValue kicks in.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search