score:1
Issue
The main issue in your code is that you've a bunch of buttons being rendered inside a form and nearly all of them don't specify a button type. The default for buttons is type="submit"
, so when any of them are clicked they are submitting the form and the form is taking the default submit action which also happens to reload the page. When the page reloads your app reloads and loses the local component state.
Button type attribute
The default behavior of the button. Possible values are:
submit
: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a<form>
, or if the attribute is an empty or invalid value.reset
: The button resets all the controls to their initial values, like<input type="reset">
. (This behavior tends to annoy users.)button
: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
Solution
Explicitly specify the button types.
The delete button
<button type="button" // <-- "button" type onClick={() => { removeItem(item); }} > Remove </button>
The form buttons to submit, reset, and open the modal
<Button variant="primary" type="submit"> <-- "submit" type Submit </Button> <Button variant="primary" type="reset" // <-- "reset" type style={{ margin: '0 20px' }} > Reset Form </Button> <Button variant="primary" type="button" // <-- "button" type onClick={handleShow} style={{ margin: '0 15px' }} > Add Experience </Button>
Note: The submit button is still going to submit the form and since you've not any onSubmit
callback on the Form
component this button, as-is, will cause the page to reload. You will want to add a submit handler and call preventDefault
on the onSubmit
event object.
const submitHandler = e => {
e.preventDefault();
// handle form data or whatever
};
...
<Form onSubmit={submitHandler}>
...
score:0
Generally we should not remove any item from array based on it's index. So try to remove items based on unique values:-
const removeItem = item => {
itemList(oldList => {
return oldList.filter((arrEle, i) => arrEle.companyName !== item.companyName);
});
};
And pass item
in removeItem
function like below:-
onClick={() => removeItem(item)}
Add key
to tr
like below:-
<tr key={`${item.companyName}-${index}`}>
Working demo: https://stackblitz.com/edit/react-cxkbge
Source: stackoverflow.com
Related Query
- Remove Items dynamically from Array of Objects
- React JS: how to properly remove an item from this.state.data where data is an array of objects
- how to remove duplicate objects from an array in reactjs
- Remove items from an array React?
- Create nested JSX list items from multi-level nested array of objects reactjs
- How to correctly add and remove specific items from an array within state?
- Remove element of an object from array of objects - react state
- Remove duplicates from NESTED array of objects
- Remove items dynamically from table/list
- reactJS remove Items from an array
- Is there a react method to dynamically add items from an array to a div in a custom pattern
- ReactJs Redux: how to remove duplicate objects (with duplicate values) from an array when deciding redux state (after map, filter, etc. functions)?
- Remove an element from an array of objects in react js
- Remove multiple Objects from an array of object
- What is the best practice to remove duplicate items from an array in a reducer?
- Remove all items from array using Reducer - React
- How to display array of objects in table getting dynamically from backend in ReactJS
- Dynamically create a links from an array of items
- How to remove multiple items in an array of objects in React?
- Remove items from array in local storage, when changing state
- Remove duplicates from inner array of array of objects
- React Select Unable to Remove Items From State Array
- Check if array of objects contains multiple values from another array of objects and remove duplicates
- Remove one element at index from the list inside an array of objects
- printing out items from an array within an array of objects
- how to remove duplicate objects from an Array of objects but with two unique keys
- Remove item from objects array
- How to remove duplicate values from an array of objects in react for select components of MUI
- How to dynamically add and remove mapped array to another array when clicked and remove from arr when clicked again in reactjs
- How to find if one of the items have completed property with value false from an array of objects using javascript and react?
More Query from same tag
- history missing in components
- Using conditions in AntD List Actions
- Firestore data not rendered after calling .get() on a reference data type
- Using OR in ternary operator
- webpack Object #<Object> has no method 'forEach'
- Return DOM element in render function of React component
- Is there a way to update state without Trigering a re-render?
- create-react-app command aborting installation Why?
- Handling many entities on Redux without repetition
- Creating a table-of-contents with a floating sidebar
- ReactJs: How to turn a map loop into a for loop?
- Chaining async functions with pure React?
- React useEffect forces me to add dependencies that trigger an infinite loop
- How to print a specific element of an array passed via context api?
- onClick event on React-Router Link tag
- How to send POST response to another function using React.js and axios?
- local image won't load on canvas
- react communication between parent and child using refs
- How to return default error if observable next is undefined
- ReactJS can't fetch and display data from localhost API
- How to implement buttons that receive different data from the API depending on which button is pressed on Redux?
- How to close all elements when one is opened in FAQ card with ReactJS
- How to Make React.js component listen to a store in Reflux
- How can I convert React Element to Html element?
- Objects are not valid as a React child error when giving value to react-select
- React: load images in advance
- How to pass props in React
- React functional component with non-JSX class has an internal array returning undefined
- How to display specific elements on a page at a specific screen resolution
- Material UI Popper over TextField how to keep popper open if the popper options are selected