score:1
Accepted answer
you can get the entire data from the redux store for checkboxes.
reducer
let initialstate ={
loading : false,
products :[],
singleproduct :{},
error : '',
checkboxes: [
{name:"orange",ischecked:false},
{name:"carrot",ischecked:false},
{name:"apple",ischecked:false},
{name:"potato",ischecked:false},
{name:"avacados",ischecked:false}
]
}
export const reducer = (state =initialstate , action) => {
switch (action.type) {
// earlier cases.
case bigactions.update_checkboxes:
return {
...state,
checkboxes : action.payload
}
default: return state
}
}
action
import axios from "axios";
// existing code...
export const update_checkboxes ="update_checkboxes";
// existing code...
export const updatecheckboxes = (checkboxes) => { // checkboxes should contain the updated checkboxes from handlechange.
return (dispatch) => {
dispatch({
type: update_checkboxes,
payload : checkboxes
});
};
};
sidenav component
const sidenav = () => {
let dispatch = usedispatch();
//get data from store
const getdatafromstore = useselector((state)=>{
return state.fetchallproducts;
})
//console.log(getdatafromstore.products);
const [sidebar, setsidebar] = usestate(false);
const [checkupdate, setcheckupdate] = usestate('')
const {checkboxes} = getdatafromstore
const showsidebar =() =>{
setsidebar(true);
}
const handlecheckchnage =(e) =>{
//console.log(e.target.value);
var allcheckboxes = [...checkboxes];
//console.log(allcheckboxes);
allcheckboxes.foreach((cbox)=>{
if(cbox.name === e.target.value){
if(cbox.ischecked){
cbox.ischecked =false
}else{
cbox.ischecked = true
}
}
})
dispatch(allactions.updatecheckboxes(allcheckboxes));
let defaultdata = [...getdatafromstore.products];
const filter = defaultdata.filter((newdata)=>{
//console.log(newdata);
if(e.target.value === newdata.name){
// console.log(newdata);
if(e.target.checked){
console.log(newdata);
setcheckupdate(newdata);
}else if(!e.target.checked){
console.log(defaultdata);
}
}
})
}
const selectall =(e) =>{
//console.log(e.target.checked);
let newcheckboxes = [...checkboxes];
if(e.target.checked){
newcheckboxes.foreach((allbox)=>{
allbox.ischecked = true;
})
}else{
newcheckboxes.foreach((allbox)=>{
allbox.ischecked = false;
})
}
dispatch(allactions.updatecheckboxes(newcheckboxes));
}
return (
<react.fragment>
<i classname="fas fa-align-justify yes" onclick={showsidebar} ></i>
{
sidebar &&
<div classname="form-group mt-3">
<label classname="mb-2 fw-bold">choose health</label> <br/>
<input classname="form-check-input" type="checkbox" name="all" onchange={(e)=>{selectall(e)}} />
<span style={{marginleft:'5px',fontweight:"bold"}}>all skils</span>
{
checkboxes.map((cb)=>
<div classname="form-check">
<label classname="form-check-label" >{cb.name}</label>
<input classname="form-check-input" type="checkbox" name="checking" value={cb.name} checked={cb.ischecked} onchange={(e)=>{handlecheckchnage(e)}} />
</div>
)
}
</div>
}
</react.fragment>
)
}
export default sidenav;
productlist
const productlist = () => {
let dispatch = usedispatch();
let getalldatafromserver = useselector((state)=>{
return state.fetchallproducts;
})
const {checkboxes} = getalldatafromserver; // you'll get the checkboxes data here
return (<dom></dom>)
}
Source: stackoverflow.com
Related Query
- Need to send the checkbox Filtered Data from Child Component to Parent Component : React Hooks, Redux
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- React Hook : Send data from child to parent component
- How to send data from stateless child component to stateless parent component in react?
- How do I get the Age data from child to parent component
- React router dom passing data from parent component to child router component does not pass the props.match
- How do I send data from child component to parent component in React
- React collect child component data on some event from the parent component
- Need Reactjs help on how to properly pass this function from the parent to child button component
- How to handle the props from Parent Component to child component to populate props data in the form for updation
- Can the child component receive old data for manipulation from parent component?
- How can I send data from a child to a parent functional component in ReactJS?
- Send Data From Parent Component To Child Component In React
- How to send data from child component to parent component in reactjs
- Can we Send data from nested child component to ancestor Parent component using useContext()?
- how to pass the data from child component to parent component
- Child component is not getting data from the parent component
- send a value from the child component to the parent component reactjs
- How to send the value of variable from a child component to the parent component?
- how to send data from child component to parent component state in reactjs
- Send data from child component to parent component in react js
- How to pass data from child component to parent component without the child component rerendering in React?
- react send data from child component to parent
- React: How to pass the data from function located on the child component into parent component?
- How to use the data from parent component to be the useState of child component?
- React hooks doing an infinite fetching when getting data from child but has no problem if the parent is a class component
- send form data from child component to parent component
- Get consolidated data from all the child components in the form of an object inside a parent component : React JS
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- I can not access the right data of property sent from parent to child component
More Query from same tag
- react - how to show relevant element when click button
- Best approach to wait on material-ui ripples to complete before taking snapshots
- How to pass the proper input to ag-grid?
- Is there a way to pass id of input tag as a onclick function parameter without actually writing the id value in JSX?
- Jest Unexpected identifier: React
- Pass data via on click from child component to parent component react
- Custom props is undefined in React router-4
- Redux Form, Radio Button Fields, how to support variable values?
- Adding Flask server to create-react-app default app, 404 on /dist/bundle.js
- Nuka Carousel heightMode don't work in react
- CSS 100% height not working in React app
- When I click the delete button the top item on the list deletes. How can I fix it?
- 'Element type is invalid: expected a string' when passing params through component in Route
- How do I get a valeu from a async function and pass it to a component ( React )?
- React Router sending nested object as query
- How do I update the cache after a mutation in Apollo / GraphQL?
- reactjs How to pass a variable to a function inside setState
- Filter data based on 2 values
- How to declare plugin options, using typescript and react-chartjs-2
- webpack-dev-server Cannot find module 'webpack'
- Passing props to child component issue
- Get Quantity for each product using React Context
- How to properly render jsx-like html inside of javascript
- TypeError: Cannot set property 'innerHTML' of null while using React.Js
- Why are my elements not using the same react state instance?
- Bundle React/Express App for production
- Keep the Form values after refreshing the page
- Modify React Component's State using jQuery/Plain Javascript from Chrome Extension
- How to update my redux store synchronously?
- How to fetch data from server using JavaScript? (adding backend to React app for the first time)