score:2
is there any reason not to use array.prototype.filter()
just like you've done in your class component? this seems more readable and ensures you avoid mutating state directly in fewer steps.
here is what that would look like in your handledelete
function in functioncomponent
:
const handledelete = (id) => {
setlist(list.filter((row) => (
row.id !== id
)));
};
score:0
you have to review your usage of the splice
array prototype.
copy.splice(id, 1);
splice need to be passed as first argument an index and at second argument a delete count as such:
splice(start, deletecount)
and you are passing an id to it. actually in your case you are passing undefined as you're calling the function without argument. i guess you could use the index of the map function to make it work:
{list.map(({ id }, index) => (
<row key={id} id={id} onclick={() => handledelete(index)}>
{id}
</row>
))}
in your case you were passing undefined as id and 1 as the deletecount so it was always deleting the first item.
score:0
in the functional component, you did not pass the id!
const functionalcomponent = () => {
const [list, setlist] = usestate([{ id: uuidv4() }, { id: uuidv4() }]);
const handledelete = (id) => {
// get all object except the id
const newrows = list.filter((i) => i.id !== id);
setlist(newrows);
};
const handleadd = () => {
setlist([...list, { id: uuidv4() }]);
};
return (
<>
<ul>
{list.map(({ id }) => (
<row key={id} id={id} onclick={() => handledelete(id)}>
{id}
</row>
))}
</ul>
<button onclick={handleadd}>add</button>
</>
);
};
score:1
in your functionalcomponent
you need to give index of the entry to splice
method. try like below.
const handledelete = (id) => {
const copy = list.slice();
// find the index
const index = copy.findindex(({ id: id }) => id === id);
// do the deletiong using that index
copy.splice(index, 1);
setlist(copy);
};
Source: stackoverflow.com
Related Query
- Deleting a targeted row in function component React
- React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
- React - How to force a function component to render?
- React Hooks Error: Hooks can only be called inside the body of a function component
- Creating custom function in React component
- React Warning: Cannot update a component from inside the function body of a different component
- React Functional component: calling as function vs. as component
- React : Pass function to child component
- Test a React Component function with Jest
- Function inside functional component in React hooks - Performance
- React w/hooks: prevent re-rendering component with a function as prop
- React Pass function to child component
- How to specify function parameters for React component callback with TypeScript?
- React - stateless component, function inside or outside component
- Return DOM element in render function of React component
- Passing a function with React Context API to child component nested deep in the tree
- Converting React function component to class component issue
- React hooks: call component as function vs render as element
- Jest -- Mock a function called inside a React Component
- Test React component method is calling function pass as a prop
- React passing parameter with arrow function in child component
- react router unmount function component
- Passing props to a react component wrapped in withRouter() function
- React JSX vs function call to present component
- React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook
- How to get value from a react function within a react component
- React Hook "useContext" is called in function "age" which is neither a React function component or a custom React Hook function
- how to access vairables outside of map function in js and jsx in a React component
- React Native pass function to child component as prop
- Call function from another React component
More Query from same tag
- Is there any way i can trigger the onEnded attribute on the video element while testing using jest?
- Pushing and Pulling an nested array with setState with Javascript
- Node Express paths are not being matched on production (Heroku)
- React PWA not installable
- Sharing a folder between react & node typescript
- Axios hitting No 'Access-Control-Allow-Origin' header is present on the requested resource error
- Send to server the new this.state
- Global, client-side application state in Relay
- React-Select filter not working on react hook
- Deploy a full stack MERN web ap to Netlify oor Heroku
- Avoid `useEffect` from fetching data on mount when dependency requires user input
- Using base state with hooks in React
- Cannot read value from axios GET request response outside of axios function
- Endless Axios Request
- How to add infinite scroll in react redux app
- How to fetch data from Web API using React query?
- React multiple output files of bundle of single Input file
- How can i set onClicked buttons values into a textfield in reactjs (Calculator)?
- How to upload an array of images
- How do I use Distance Matrix API in ReactJS using @react-google-maps/api?
- How do I get Redux state before the component re-renders?
- Copy scrollTop value from textarea to div
- npm start not working after changing PATH system environment variable
- React Map Method within Map Method
- How to execute bound function outside of event handler in React?
- Nextjs dynamic routes - how to pass props from parent to dynamic route child
- compare array against array and delete element
- how to trigger an event after component did mount with react hooks
- How to display correct rows per page using Material UI table pagination
- Reactjs and Flexbox: Wrapping divs in render function making flex hard