Im using AntD components library. i have 2 <Form.List> nested inside another <Form.List> and im having trouble to setFieldsValue to nested inputs

Question

I've created a reproducable example. Here is the link: https://codesandbox.io/s/size-antd-5-1-6-forked-315hum?file=/demo.tsx

So i have to set the fields value, but the last nested

<Form.List name={[concatenationName, "options"]}>

is kind of bugged. Because if we watch the logs, the value is set properly. But the value is not rendered in the input.

Here is how it´s rendered:

And here are the values that shows the form watcher:

What im expecting is that those options, actually shows the value of the input. It's like it gets the value, but it doesnt render the value. I had no problems with other <Form.List>, but this one seems to be kind of bugged.

Any suggestions why is not rendering the value in the input. And why all the other inputs, when i do the setFieldsValue.

I've added a DEBUG button to do easier debugging. It basically setFieldsValue to all inputs, and with it we can see how the last nested inputs dont render its value, but other inputs do render the value.

Answer 1

I found the error, and it was <Form.Item></Form.Item> not wrapping directly the input, so it wasnt able to set the value

 <Form.Item
     {...concatenationOptionRestField}
     name={[concatenationOptionsName, 'content']}
     rules={[
         {
             required: true,
             message: 'Porfavor complete el campo',
         },
     ]}
 >
     <Input
         style={{
             width: '100%',
         }}
         placeholder="Ingresa opción de respuesta"
     />
 </Form.Item>