score:3
Accepted answer
the name of your prop is ondelete, so in your component todo.js, you have to call your function like below
<button onclick={() => this.props.ondelete(this.props.id)}>delete</button>
as answer to your comment
your state is define like
this.state = {
todos: [
{ id: 1, description: 'walk the cat', iscompleted: true },
{ id: 2, description: 'throw the dishes away', iscompleted: false },
{ id: 3, description: 'buy new dishes', iscompleted: false}
],
newtododescription: ''
};
so, your function deletetodo should be like
deletetodo(id) {
this.setstate((prevstate) => ({
todos: prevstate.todos.filter(item => item.id !== id),
}))
};
score:0
i'll suggest you should use the splice method.
Source: stackoverflow.com
Related Query
- React JS: How to make this delete button work
- React JS - How does this function work to delete JSON data?
- React to do list, how do i get this delete button to work?
- How to make the filters work in this todo app created using react and redux?
- How to make a Material UI react Button act as a react-router-dom Link?
- How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How can I make React Portal work with React Hook?
- How does this React code work on CodePen even if no preprocessor is selected?
- How to make React HOC - High Order Components work together?
- How to make a button redirect to another page in React
- How to make React storybook 'addon-links' work
- Ionic popover with React - How to make it sticky to the button
- How to make Relay and React Routing work properly?
- How to make one table record editable on button click in React when the table record is mapped?
- How to make React <FontAwesomeIcon/> color changed on button hover?
- How to make a React multi-step form work with React Router?
- In React with Redux how to make double colons work
- How to make react data grid table cell editable and focused on click of a button without performing a double click action
- How to delete objects from react state hook array with a button click
- How can I use a loop to make this React component more DRY?
- Can't make this message hook work in React
- How do I make this custom generated table editable? Made it using Ag-grid react
- How to make regular javascript work in a react app
- How to make Button work on Input (REACT)
- How to make column-resizer work in React
- How to make an API request In React on button click
- How to make browserHistory work with webpack react
- How to use a custom React hook to make a POST or DELETE request with Axios
- How do I make this React Core UI Tab Pane component work?
More Query from same tag
- Couldn't use the same classname across components. CSS is not being scoped inside a style component
- Add a default value for a json property when it doesn't exist in Javascript
- Psuedo-element ::before is not displaying
- Error while trying to access files in the app
- Child elements not being rendered in the DOM
- Add a service worker to Webpack in react
- .NET 6 with React won't connect to SignalR
- .filter and .map into a function returns?
- How to get UserId from localStorage
- How do I find child components without having to specify the HOC wrapping them?
- Copy object from one array of objects to another in React
- how to make Redux state reset every time React component starts rendering
- apply multiple filters react
- How to change style of child element by root component in material UI?
- Why do redux-thunks need to be bound to dispatch?
- How to import a component or file in React using variables?
- React Getting error with BroadcastChannel API
- Javascript - ReactJS - display image with ReadableStream as source
- Store state within the React Router component?
- Redux Action not getting passed to reducer
- Unable to persist state of a cart (ecommerce website) in localstorage
- react, creating a project issues
- Customization of devloper portal to put api published time in overview of devprortal
- React component with two dependent useEffect hooks
- Dynamically create functions in React to be consumed for react-router-dom
- Syntax error: Unexpected token, expected ; in index.js creat-react-app
- Next/React-Apollo: React props not hooked up to apollo cache when query comes from getInitialProps
- How to use conditional rendering in reactjs?
- Can't import d3-queue in React.js? Attempted import error: 'queue' is not exported from 'd3' (imported as 'd3')
- Is adding a value inside an array.map considered mutating?