score:0
this is a full working example, you can check all label from parent:
const parent = () => {
const [todos, settodos] = react.usestate([
{ id: 1, label: "wake up", completed: true },
{ id: 2, label: "make coffee", completed: false },
{ id: 3, label: "go to work", completed: false }
]);
const checkall = react.usememo(() => {
const filtertodos = object.assign([], todos);
return (
filtertodos.filter(f => f.completed === true).length === todos.length
);
}, [todos]);
const checkalltodos = e => {
const value = e.target.checked;
settodos(current => current.map(f => ({ ...f, completed: value })));
};
const checktodo = react.usecallback(id => {
settodos(current =>
current.map(item => {
if (item.id === id) return { ...item, completed: !item.completed };
else return item;
})
);
}, []);
return (
<div>
<ul>
<li>
<input type="checkbox" checked={checkall} onchange={checkalltodos} />
todos {checkall}
</li>
{todos.map(item => (
<todo
id={item.id}
checked={item.completed}
key={item.id}
change={checktodo}
>
{item.label}
</todo>
))}
</ul>
</div>
);
};
const todo = react.memo(({ checked, children, id, change }) => (
<li>
<input type="checkbox" checked={checked} onchange={() => change(id)} />
{children}
</li>
));
reactdom.render(<parent/>,document.getelementbyid("root"))
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>
score:1
i don't really have that much familiarity with the way you are trying to do it, but i can suggest an alternative. instead of doing that, you can do something like this:
const [checkedelements, setcheckedelements] = usestate([]);
then when you map and create the elements you can use the index of the map method to say something like
onclick={()=>setcheckedelements([...checkedelements, index])}
checked={checkedelements.includes(index)}
you can clear all the elements when clicking the button by adding this on the button:
onclick={setcheckedelements([])}
Source: stackoverflow.com
Related Query
- How to change the state of an array of children components inside a parent using Hooks?
- How can I change parent state in two children components using Hooks in React?
- how do i update state in react for updating the value of an object inside an array using array.map function
- Why the state is still showing Promise while using redux? and how should I access the array inside the result?
- How to change the inputted text's style inside an input element using Styled Components - React
- How to update a single object inside the array with useReduce on state change
- How to map an array , and change the state asynchrony using react-hooks
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- How does React re-use child components / keep the state of child components when re-rendering the parent component?
- For ReactJS, how is the change from using Container components and Presentation components to using Hooks?
- If using forceUpdate() is discouraged, how should components react to change events in the model?
- How to change the background color of a parent component from inside a child component in react, gatsby
- useEffect Hook - how to detect the change of an object's property in a state array
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to update parent state and child components props at once (at the same time)
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- How can I change a child's state from the parent component
- React How to change state value from child to Parent using useState and useContext
- How to change the state value using a click button
- How to change an object value of a state array by using a specific array index
- Change the state of an element to show an array of Components after API call
- How to maintain state of child components when they are filtered through the parent component?
- How to change useState's state without re-rendering the component, but just its components
- How to change the state of a specific value in an array with condition
- How do I change react state using a promise with Formik inside handleSubmit to show/hide a div?
- How to refresh components when parent state changes in react when using react router
- How can I change the state of a parent component from a child component?
- When selecting an option in a dropdown, how do I change the state with onChange but with a value other than the one inside the option tags
- How to animate a conditionally rendered part of the component on state change using javascript and css?
- How to change the state of the particular component when it is clicked, using useState in react js?
More Query from same tag
- open link in a new tab using Link Next.js component
- Ext React Segmented button throws an error when provided a value
- How do I scroll up and down a SideBar rather than the whole window?
- Alternate methods for injecting js code into index.html in react
- React - Loop through multiple nested arrays json object response then update State
- React and d3-graphviz
- React : Take input file when link is clicked in function component
- How can I share a function in a react-redux connected component with other components?
- react draft wysiwyg not displaying styles in next js
- mount() fails because target container is not dom element
- Looping through post categories via WordPress REST API - React
- Clicking on a block and controlling a child
- Unnecessary escape character: \` no-useless-escape
- What is Reacts function for checking if a property applies?
- how to fetch images api in reactjs?
- Jest mocking return value of a static method of connected component
- React - can't pass up data from child component
- Will code after setState() in React be run?
- Can't pass item argument in map to onClick
- Since updating animejs my javascript no longer functions
- React redirect - Redirect component on react-router-dom
- React basics - setState() not updating counter in the state
- React-admin table displays twice
- How to push Create-React-App build to Heroku?
- EACCES: permission denied, unlink
- SyntaxError: Invalid regular expression: During first installation and run of Next.js react
- Typescript react context + Type '{}' has no call signatures
- Multiple date array with same value by name on Highcharts
- How to set up dynamic environment configurations in React
- Animate field width in React Native