How to process a list of inputs?

Question

JavaScript

Hello everyone, I have an array of objects, inside the objects there is another array of objects, based on this array I display a list of inputs. Now how can I make event handlers for each input in order to send them to the back in the same form as they arrived to me, only with new values

const renderAllConditionsProperties = () => {
        return conditions && conditions.map((a: any) => {
            return a.conditionProperties.map((item: any) => {
                return (
                    <div>
                        <span>{item.propertyDescription}: </span>
                        <Input
                            style={{
                                border: '1px solid #0079E9',
                                width: '10%',
                                boxSizing: 'border-box',
                                height: '33px',
                                borderRadius: '10px',
                                marginTop: '50px'
                            }}
                            key={item.conditionProperyId}
                            value={item.propertyValue}
                            // onChange={(e) => setTest((prevState) => prevState.find((c) => c[propertyName] === item.propertyName))}
                        />
                    </div>
                )
            })
        })
    }

Here is the
"conditions" data model: [
{
"conditionId": 0,
"conditionName": "string",
"conditionDescription": "string",
"conditionProperties": [
{
"conditionPropertyId": 0,
"propertyName": "string" ,
"propertyDescription": "string",
"propertyValue": "string",
"propertyElementType": "string"
}
]
}
],

Answer 1

You can use the Immer library
example
!!!it's very bad to do this, but the order is important to you, so you can't normalize

onChange={(e) =>
            setTest(
              produce((draft) => {
                draft.conditions.forEach((c) =>
                  c.conditionProperties.forEach((prop) => {
                    if (prop.propertyName === item.propertyName) {
                        prop.propertyValue = e.target.value;
                    }
                  })
                );
              })
            )
          }

PS I advise you to read about data normalization