score:6
Accepted answer
here you go, this here should work for you now. i added some notes in there.
const app = (props) => {
const [todos, settodos] = react.usestate([
{name: 'a', done: false},
{name: 'b', done: false},
{name: 'c', done: false},
])
const handleclick = (name) => {
/*
here you were using todos.find which was returning the object. i switched
over to todos.findindex to give you the index in the todos array.
*/
const index = todos.findindex(todo => todo.name === name)
/*
in your code you are just setting temptodos equal to todos. this isn't
making a copy of the original array but rather a reference. in order to create
a copy i am adding the .slice() at the end. this will create a copy.
this one used to get me all of the time.
*/
let temptodos = todos.slice();
temptodos[index].done = true;
settodos(temptodos);
}
console.log(todos)
return (
<div>
<h1>hello, world!</h1>
<div>
{todos.map((todo,index) => {
return todo.done ? (<div key={index}>{todo.name} : done</div>) : (<div onclick={() => handleclick(todo.name)} key={index}>{todo.name} : not done</div>)
})}
</div>
</div>
)
}
reactdom.render(
<app />,
document.getelementbyid('root')
);
another thing i did was simplify the keys for the divs created by the map. i just added the index to the map and used that for the key, a lot cleaner that way.
hope this helps!
score:0
react won't see the state as changed unless you create a new array.
const handleclick = n => settodos(todos.map(t => t.name === n ? {...t, done: true} : t));
Source: stackoverflow.com
Related Query
- How to re-render react component when mapping over state that is array of objects
- How do I map over an array of objects in React and then conditionally render a component based on a previous value?
- React - Dealing with undefined state when mapping over an array of objects from API
- How to create React elements in an array (with props) and then render them by simply mapping over that array?
- How to stop re render child component when any state changed in react js?
- How to specify a key for React children when mapping over an array
- React - How do i force child components to re render when parent state component changes?
- How to update specific value when the state is an array of objects - React
- how to change the style of only one react component that is being render through .map() when the component is clicked
- How to manage State values when cursor is moving fast over a component in React JS?
- How to render component conditionally when leaf value of global state changes using react hooks
- How to cause a component to re render in react when using a hook which holds some state
- How to structure React code with Apollo Query so that a random queried array of objects doesn't rerender with state change?
- How to only render 25 objects to the screen at a time even though I am mapping over an array containing 1,000 objects using React.js
- How do I pass an array of objects that contains a component to child component in React with Typescript?
- How write my condition when using destructuring when mapping over an Array of objects
- How to tell React ts component that a nullable state is guaranteed not to be null so that we don't have to confirm over and over?
- How to have component reusable in React TypeScript when passing array of objects as data
- How to Remap Array of Objects when State gets updated in React JS?
- With useState How do I set initial state to an empty Array, and then add empty Objects to that Array when I button is Clicked?
- How to fetch an array of objects and render it in the component as a normal text using React Hooks?
- How to check if an array that has objects in react components state has duplicate values before sending a form?
- React shouldComponentUpdate() is called even when props or state for that component did not change
- How to access state when component unmount with React Hooks?
- How to pass the match when using render in Route component from react router (v4)
- How to TEST async calls made in componentDidMount that set the state of React Component
- How to maintain react component state when goback from router?
- how and when to call a react component methods after state change from redux
- How to test React state after calling a component method that updates state - using Enzyme
- How can I spread props to a React component that uses exact props when using Flow?
More Query from same tag
- Jest moduleNameMapper to find files: "resolver": undefined
- unable to load .mtl and .obj through react-three-renderer
- Getting values from form input groups
- How can I display more than one component from the same file in the App.js?
- Child function not accessible when called from parent component through ref in React.js when placed in separate files
- With redux-saga, how can I takeLeading based on action params as well as type?
- Redux-saga with redux-toolkit returning empty object and consoling the response shows promise{<pending>}
- How do I re render the entire React Pivot Table UI component when I change the selection in select tag?
- How to set a footer section to stay at the bottom unless there is extra content and we need to scroll to see it using flex
- Enzyme+React expect component string - failed to parse selector
- React - sharing variables through useContext, to update and re-render components, but not working
- Self-hosted fonts using NextJS
- react-big-calendar doesn't show events
- I want to render the starting page based on user logged in or not on react
- How can i filter my search by an boolean atrribute?
- How to split the string based on a specific condition
- Retrieve values from db to drop down in ant form
- how to export the return table data to a csv file using react js
- Add props to React render call with looping construct
- "Link" is not navigating to the specified routes - React JS (react-route-dom)
- How to filter off a blank array? React/Javascript/Es6
- spacing characters inside input equally over it's entire width
- React Router v4 routes with parameters not rendering/refreshing
- Route exact path="/" not working for react github
- How do I make mutliple graphql queries with the same query using react-apollo?
- Prevent Reload in React Native WebView
- Reactjs if conditions
- Adding next and prev buttons using react.js
- Getting a mousemove event from a component that doesn't want me to have it
- How to avoid z-index bugs with react components