Home » Javascript » How to update a nested state in React?

How to update a nested state in React?

Posted by: admin August 19, 2018 Leave a comment

Questions:

i am trying to update customize inside subcatagory

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

my form look like this

{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((gj, idx) => (
                            <div key={idx}>
                                <input
                                    type="number"
                                    placeholder={`subCatagory #${idx + 1} price`}
                                    value={gj.name}
                                    onChange={this.gjj(idx)}
                                />
                            </div>
                        ))}
                    </div>
                ))}

how to update the inner json value using react onChange ., is there way to update model in react.js usnig es6 ?

Answers: