React Input Defaultvalue Doesn't Update with State

how to update input defaultvalue using useRef (after the initial render?)

The defaultValue property only works for inicial rendering, that is the reason that your desired behavior works one time and then stops. See a similar question here: React input defaultValue doesn't update with state

One possible solution still using refs is to set the itemToEdit name directly into the input value using ref.current.value.

const editItem = (id) => {
        refContainer.current.focus();
        setItemToEdit(() => {
            const item = list.find((item) => item.id === id);
            refContainer.current.value = item.name;
            return item;
        });
        setIsEditing(true);
    };

React input defaultValue doesn't update with props changes

That's because the defaultValue is only used the first time the component gets rendered. If you need to update the value later, you have to use a controlled input.

Update:

From the React Docs:

The defaultValue and defaultChecked props are only used during initial
render. If you need to update the value in a subsequent render, you
will need to use a controlled component.

I guess you could remove and re-add the component to give it a new defaultValue, but you really shouldn't.

Cant Update The state after getting data from the input React js

you have to use assignProductToProductionline.ProductionName.
This line

const { Id, ProductionCode, ProductionName } = assignProductToProductionline;

creates a constant that is initialized with the first value and never changed.

React default value does not show in input field

The problem is your conditional assignment of the value of the input field in the render function. When you try to clear the value of the field it just resets to this.state.fetched_data.username so you can never clear it.

Set the initial state when you load the form:

componentDidMount() {
    this.setState({
        username: this.state.fetched_data.username,
    });
}

Then set the value of the input field in render:

<input 
    value={this.state.username}
    onChange={this.onInputChange_username}
/>

And your onChange handler is fine as it is:

onInputChange_username(event){
    this.setState({username: event.target.value});
}

react antd input defaultValue is not displayed

As far as I can understand that you want to show an error message when number length becomes more than 10. This is what you've correctly applied here screenshot
But as you're using input field inside of a form, there is a different approach to work with default value and onChange Event. DefaultValue and onChange event will not give you the expected output when you use them inside of form element. Here you must you form methods like this

'https://pastebin.com/raw/1NmR4tQT'

study more about ant Design Form methods from here Learn More about ant design form methods

---

Related Topics