I want variantsObject should be like below please help me
{
“6gb,red”: {
“price”: “10000”,
“qty”: “5”
},
“4gb,red”: {
“price”: “3000”,
“qty”: “3”
}
}
I have made this code to make that things but i am getting the last onBlur value…attached the code below please look and help me
page variantsForm
const VariantForm = props => {
const [variantsObject, setVariantsObject] = useState([]);
const getPrice = (value, item) => {
const newVariants = {
[item]: {
price: value
}
}
setVariantsObject(() => {
return Object.assign({} , variantsObject, newVariants)
});
}
const getQty = (value, item) => {
const newVariants = {
[item]: {
qty: value
}
};
setVariantsObject(() => Object.assign({}, variantsObject, newVariants));
};
const getSku = (value, item) => {
const newVariants = {
[item]: {
sku: value
}
};
setVariantsObject(() => Object.assign({}, variantsObject, newVariants));
};
console.log(variantsObject)
const variants = [
[
"6gb",
"red"
],
[
"4gb",
"red"
]
]
return (
<Table className="table-default variantTable" responsive>
<tbody>
<tr>
<th>No.</th>
<th>Variant</th>
<th>Price</th>
<th>Quantity</th>
<th>Sku</th>
<th>Action</th>
</tr>
{variants.map((item, index) => (
<tr key={index}>
<td>
<input
type="checkbox"
className="vCBox"
id={item.toString()}
/>
</td>
<td>
{item
.toString()
.split(",")
.join(" / ")}
</td>
<td>
<Form.Control
type="text"
placeholder="$0.00"
name="variantPrice"
onBlur={e => getPrice(e.target.value, item.toString())}
/>
</td>
<td>
<Form.Control
type="number"
placeholder="0"
name="variantQty"
onBlur={e => getQty(e.target.value, item.toString())}
/>
</td>
<td>
<Form.Control
type="text"
placeholder=""
name="variantSku"
onBlur={e => getSku(e.target.value, item.toString())}
/>
</td>
<td>
<div className="btn-group">
<button
type="button"
className="btn btn-secondary"
onClick={() => productEditHandler(item._id)}
>
<i className="fas fa-pen-square"></i>
</button>
<button
type="button"
className="btn btn-danger"
onClick={() => productDeleteHandler(item._id, item.name)}
>
<i className="far fa-trash-alt"></i>
</button>
</div>
</td>
</tr>
))}
</tbody>
</Table>
)
};
export default VariantForm;