Clash Royale CLAN TAG#URR8PPP

Can't get my form in React to work properly

I'm creating a form where I want to add form rows and edit any row/cell at any time. It seems to work fine by adding new rows but if I edit a previous row/cell the form fields get's messed up.

This is my handleChange for each field:

handleChange = (key, e) =>
const name, value = e.target
const currentRow = this.state.formRows.filter(r => r.key === key)[0]
const withoutCurrentRow = this.state.formRows.filter(r => r.key !== key)
const updatedRow = ...currentRow, [name]: value
const newRows = [...withoutCurrentRow, updatedRow]
this.setState(( formRows ) => ( formRows: newRows ))



Here's my form on codesandbox

1 Answer
1

You are passing in the arguments in wrong order for one of your inputs. It should be the key as first argument and the event as second.

key

event

<Input
value=description
name="description"
placeholder="description"
style= width: '20%', marginRight: 8
onChange=e => this.handleChange(key, e)
/>
<Input
value=amount
name="amount"
placeholder="amount"
style= width: '20%', marginRight: 8
onChange=e => this.handleChange(key, e)
/>


You could also use findIndex to get the index of the object you want to update, and create a new copy of that object in the array with an updated field.

findIndex

handleChange = (key, e) =>
const name, value = e.target;
this.setState(previousState =>
const formRows = [...previousState.formRows];
const currentIndex = formRows.findIndex(row => row.key === key);

formRows[currentIndex] = ...formRows[currentIndex], [name]: value ;

return formRows ;
);
;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.