React input defaultValue re-rendering

Question

I'm using form with react and I'm having trouble updating my input values. I have two listing buttons. These buttons allow me to call different json objects and transfer them to the input. And I use these buttons respectively. Some json objects may have similar keys. There is no change in the inputs where these similarities are transferred. While there is no problem in different keys, there is no change in the input for the same keys. I write values from json as defaultValue to the input. There is no change in defaultValues. I used a placeholder to test it. the placeholder continues to work without any problems. However, defaultValue is not updated.

{Object.keys(props.activeElement).map((key) => (
          <Form.Item label={key} name={key}>
            {inputRender(key)}
          </Form.Item>
  ))}

When the relevant button is clicked, the returned jsons are set to the activeElement.

const inputRender = (key) => {
    return <Input defaultValue={props.activeElement[key]} />;
  };

Can you help me?

It is hard to say with the little code you shared but, from your description, I'd expect activeElement[key] to come from state (which will probably be updated every time you click on a button) rather than from props (which is static). — secan
– secan, Commented Jan 25, 2021 at 13:57
Add a key to the element and change that each time you need the value to update, it will force the element to rerender. — Michael
– Michael, Commented Jan 25, 2021 at 14:30

Ramesh Reddy · Accepted Answer · 2021-01-25 14:00:59Z

0

The defaultValue is cached on the first render. So even when props.activeElement[key] points to a new value, the input's value doesn't change.

More about that on antd's FAQ.

answered Jan 25, 2021 at 14:00

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gucal Over a year ago

So do you have a preference suggestion for this?

Ramesh Reddy Over a year ago

Why not use value and onChange as you have controlled components.

Gucal Over a year ago

I am not using onChange because I am using formOnChange. When I use Value, the inputs return empty.

Ramesh Reddy Over a year ago

@Gucal Did you try using initialValues on the Form?

Gucal Over a year ago

I tried but unfortunately this did not solve my problem :(

Gucal · Accepted Answer · 2021-01-26 08:29:23Z

0

I solved the problem with the use of ref. I created a ref value.

const formRef = useRef ();

On button click i ran this.

formRef.current.setFieldsValue ({... json});

And I used this refi on my form.

ref = {props.formRef}

answered Jan 26, 2021 at 8:29

Gucal

9411 gold badge13 silver badges22 bronze badges

Comments

Ironluca · Accepted Answer · 2024-03-13 10:29:23Z

For components like input etc. which maintain their own states there are attributes that don't change for the life-time of the component and therefore the default value will become permanent state of the component (Refer: Legacy but still applicable document).

When React renders a component by position, it always takes the state of the component stored in React. Therefore as long as the same component (in this case input) is rendered in the same position, it will render with the same React state. (Refer: Preserving & Resetting State).

One way to make the default value to be rendered is to ensure that it is not the same component, for which a 'key' property needs to be added to the input.

In the below code a key is set to a new UUID (uuid - npm), which essentially forces React to reset the entire component state in the memory and render it as a new component.

<input type="text" 
       name="proc_name" 
       placeholder="This is the name" 
       defaultValue={procName} 
       key={uuidv4()}/>

Collectives™ on Stack Overflow

React input defaultValue re-rendering

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related