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

{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>
            ))}