dynamic form in react how to update nested state field in react.js

Question

My state :

this.state = {
        name: '',
        subCatagory: [{ name: '', price: '', customize: [] }],
    };

my form in react.js :

{this.state.subCatagory.map((subCatagory, idx) => (
                <div className="subCatagory" key={idx}>
                    <input
                        type="text"
                        placeholder={`Enter Dish  #${idx + 1} name`}
                        value={subCatagory.name}
                        onChange={this.handlesubCatagoryNameChange(idx)}
                    />
                    <input
                        type="number"
                        placeholder={`subCatagory #${idx + 1} price`}
                        value={subCatagory.price}
                        onChange={this.handlesubCatagoryPriceChange(idx)}
                    />
                    <button
                        type="button"
                        onClick={this.handleRemovesubCatagory(idx)}
                        className="small"
                    >
                        Delete
                    </button>
                    <button type="button" onClick={this.addNewCust(idx)} className="small">
                        is cust availble?
                    </button>
                    {subCatagory.customize.map((customize, custIdx) => (
                        <div key={custIdx}>
                            <input
                                type="text"
                                placeholder={`subCatagory #${custIdx + 1} price`}
                                value={customize.name}
                                onChange={this.handlesubCatagoryChange(
                                    idx,
                                    'customize',
                                    custIdx
                                )}
                            />
                        </div>
                    ))}
                </div>
            ))}

i want to update every time when a value is updated in input handlesubCatagoryChange and my form is dynamic one ., here i took index of first map and then index of second map but can't able to update the state in react

TryingToImprove · Accepted Answer · 2018-05-23 09:58:54Z

1

You can update the item in the array with a function like this

handlesubCatagoryNameChange = idx => e => {
    const value = e.target.value;

    this.setState(prevState => ({
        ...prevState,
        subCatagory: subCatagory.map((x, i) => {
            if (i === idx) {
                return {
                    ...x,
                    name: value
                }
            }

            return x
        })
    }))
}

(this is only for the name, you will need the same method for the other fields)

This will keep your subCategory array immutable, and only update the item on the specified index.

For the nested array, you will do the same - something like this (if I understand correctly)

handlesubCatagoryChange  = (otherIdx, propertyPath, innerIdx) => e => {
    const value = e.target.value;

    this.setState(prevState => ({
        ...prevState,
        subCatagory: subCatagory.map((x, i) => {
            if (i === otherIdx) {
                return {
                    ...x,
                    [propertyPath]: x[propertyPath].map((y, j) => {
                        if (j === innerIdx) {
                            return {
                                ...y,
                                name: value
                            }
                        }

                        return y
                    })
                }
            }

            return x
        })
    }))
}

edited May 23, 2018 at 9:58

answered May 23, 2018 at 9:24

TryingToImprove

7,4555 gold badges32 silver badges40 bronze badges

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

3 Comments

User_3535 Over a year ago

handlesubCatagoryPriceChange = idx => evt => { 		const subCatagory = this.state.subCatagory.map((subCatagory, sidx) => { 			if (idx !== sidx) return subCatagory; 			return { ...subCatagory, price: evt.target.value }; 		});  		this.setState({ subCatagory: subCatagory }); 	};

for single array i used map function and it worked fine but can't able do same in nested one

TryingToImprove Over a year ago

@User_3535 In your gist, you are not doing what I suggest in the second code example.

User_3535 Over a year ago

Yes ., can u suggest me or can u provide a gist ?

Manoz · Accepted Answer · 2018-05-23 11:12:58Z

1

Change button to use event as well

{this.handlesubCatagoryNameChange.bind(this,idx)}

Then use Object.assign

handlesubCatagoryNameChange(idx,e){
        let subCatagory = Object.assign({}, this.state.subCatagory); //creating copy of object in state
        subCatagory[idx].name = e.target.value
        this.setState({ subCatagory });
    };

answered May 23, 2018 at 11:12

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Collectives™ on Stack Overflow

dynamic form in react how to update nested state field in react.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related