I'm new in this forum. I've got a problem. When I delete the last row from the table, the other rows with inserted data are deleted too.
Here's the code you've got to see with observations:
const selector = formValueSelector('bill'); //initializating a selector. bill is the name of
// the form.
Then just below that code line:
const selector = formValueSelector('bill');
I've got a class component called Detail:
class Detail extends Component{
//In the FOLLOWING LINES I'm changing props of calculated subtotal called as
//"isSubtotal"
componentDidUpdate(prevProps, index) {
if (this.props.isSubtotal !== prevProps.isSubtotal) {
this.props.dispatch(
//bill is the name of the form. Changing subtotal detail with dynamic index.
//this.props.index is the dynamic index and this.props.isSubtotal is calculated
//value
change('bill', `detail[${this.props.index}].subtotal`, this.props.isSubtotal)
);
}
}
//HERE I'm rendering Detail's component
render(){
const{detailItem,index,fields,isSubtotal} = this.props;
return(
<tr key={index}>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.quantity`}
type='number'
component= {UtilityQuantity}
placeholder= '...quantity'
// label = "Quantity"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.code`}
type="number"
component= {UtilityCode}
placeholder='...Product's code'
//label = "Product's code"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.name`}
type="text"
component= {UtilityName}
placeholder='...product's name'
// label = "Product's name"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.price`}
type="number"
component= {UtilityPrice}
placeholder= '...Price'
// label = "Product's price"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.subtotal`}
component= {UtilitySubtotal}
placeholder= '...subtotal'
// label = "Subtotal"
>
{isSubtotal}
</Field>
</td>
</tr>
);
}
}
Here's RenderDetail who contains DetailComponent when iterating it:
const RenderDetail = ({fields, meta: { error,submitFailed}}) => {
return(
<dl>
<b> Detail: </b>
<dt>
{/*When Clicking on Add Detail Add each row to the table "detail"*/}
<button type="button" className= 'btn btn-primary' onClick={() =>
fields.push()}>Add Detail</button>
{submitFailed && error && <span>{error}</span>}
</dt>
<div className='table-responsive'>
<table className='table table-striped table-sm'>
{/*Here I'm declaring the columns of the table*/}
<thead>
<tr>
<th>Quantity</th>
<th>Product's code</th>
<th>Product's name</th>
<th>Product's price</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
{/*HERE inside tbody tag I'm getting fields from every detail item*/}
{ fields.map((registerDetail, index) =>
{/*Detail is the class Component*/}
<Detail detailItem={registerDetail} fields={fields} index={index} key={index} />
)}
</tbody>
</table>
</div>
{error && <dt className="error">{error}</dt>}
<button className='btn btn-light mr-2'
type="button"
title="Remove Detail"
onClick={() =>{
//THIS FOLLOWING line I'm assign the index from last row to selectedIndex
let selectedIndex = fields.length - 1;
//HERE IS THE KEY LINE you must pay attention
fields && fields.remove(selectedIndex);
}}>
Delete Detail
</button>
</dl>
)};
Here I'm initializating my detail component using redux form:
//INITIALIZATING DETAIL COMPONENT FORM
Detail = reduxForm({
form: 'bill',
validate
})(Detail);
Here I'm connecting Detail Component and binding reducers and actions. In theory, the table form should be saved in state.
Detail = connect((state,props,fields) =>{
const quantity = selector(state,`${props.detailItem}.quantity`);
const price = selector(state,`${props.detailItem}.product.price`);
return{
isSubtotal: quantity * price
}
},{})(Detail)
I will explain you how does it work the table. When I'm clicking on add detail, I add a row. e.g I added 5 rows.
And e.g I insert 10 in quantity and 20 in price on first row and I've got 200 in subtotal field. Subtotal is not editable. It's calculated.
Now, in second row I insert 10 in quantity and 10 in price and I've got 100 in subtotal. The other rows are empty. The data form should be like this:
row 1 : {quantity: 10, product: {code: 13321, name: "product 1",
price: 20}, subtotal: 200},
row 2 : {quantity: 10, product: {code: 12222, name: "product 2",
price: 10}, subtotal: 100}
row 3 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 4 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 5 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
the expected behavior is When I'm deleting last row, row 5 in this case, the data I'm showing on screen should be like this:
row 1 : {quantity: 10, product: {code: 13321, name: "product 1",
price: 20}, subtotal: 200},
row 2 : {quantity: 10, product: {code: 12222, name: "product 2",
price: 10}, subtotal: 100}
row 3 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 4 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
But real output is when I deleted the last row. In this case, row 5, row 1 and row 2 are deleted too. And I've got next one output:
row 3 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 4 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
I am not only deleting the last row of the table but also the rows with the values that I inserted are also deleted.
Can someone come up with a solution to this problem?
How can I solve this issue?
Its a bit hard understanding your code. A better way to show your working would be repl.it for quick understanding. Anyhow, i think you should use split instead to remove the targeted array with index.
field.splice(selectedIndex, 1);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments