We Keep Coding

Checkbox values are not updating when state is set: ReactJS

I am having an app with two sections. Left section contains the categories and the right section containing the items under it. Under each category, I have the button to select all or unselect all items. I see the state changes happening in the code ( it is pretty printed inside HTML) but the checkbox values are not getting updated. Can someone help?
https://codesandbox.io/s/zealous-carson-dy46k8?file=/src/App.js
export const RightSection = ({ name, apps, json, setJson }) => {
function handleSelectAll(categoryName, type) {
const checked = type === "Select All" ? true : false;
const updated = Object.fromEntries(
Object.entries(json).map(([key, category]) => {
if (category.name !== categoryName) {
return [key, category];
}
const { name, tiles, ...rest } = category;
return [
key,
{
name,
...rest,
tiles: tiles.map((item) => ({
...item,
checked
}))
}
];
})
);
setJson(updated);
}
return (
<>
<div>
<input
type="button"
value={`select all under ${name}`}
onClick={() => handleSelectAll(name, "Select All")}
/>
<input
type="button"
value={`unselect all under ${name}`}
onClick={() => handleSelectAll(name, "Unselect All")}
/>
<h4 style={{ color: "blue" }}>{name} Items</h4>
{apps.map((app) => {
return (
<section key={app.tileName}>
<input checked={app.checked} type="checkbox" />
<span key={app.tileName}>{app.tileName}</span> <br />
</section>
);
})}
</div>
</>
);
};
import { useEffect, useState, useMemo } from "react";
import { SidebarItem } from "./SideBarItem";
import { RightSection } from "./RightSection";
import "./styles.css";
export default function App() {
const dummyJson = useMemo(() => {
return {
cat1: {
id: "cat1",
name: "Category 1",
tiles: [
{
tileName: "abc",
searchable: true,
checked: false
},
{
tileName: "def",
searchable: true,
checked: true
}
]
},
cat2: {
id: "cat2",
name: "Category 2",
tiles: [
{
tileName: "ab",
searchable: true,
checked: true
},
{
tileName: "xyz",
searchable: true,
checked: false
}
]
},
cat3: {
id: "cat3",
name: "Category 3",
tiles: [
{
tileName: "lmn",
searchable: true,
checked: true
},
{
tileName: "",
searchable: false,
checked: false
}
]
}
};
}, []);
const [json, setJson] = useState(dummyJson);
const [active, setActive] = useState(dummyJson["cat1"]);
return (
<>
<div className="container">
<div>
<ul>
{Object.values(json).map((details) => {
const { id, name } = details;
return (
<SidebarItem
key={name}
name={name}
{...{
isActive: id === active.id,
setActive: () => setActive(details)
}}
/>
);
})}
</ul>
</div>
<RightSection
name={active.name}
apps={active.tiles}
{...{ json, setJson }}
/>
</div>
<p>{JSON.stringify(json, null, 2)}</p>
</>
);
}

since you have not updated data of checkbox (in your code) / logic is wrong (in codesandbox) do the following add this function in RightSection
...
function setTick(app, value: boolean) {
app.checked = value;
setJson({...json})
}
...
and onChange in input checkbox
<input
onChange={({ target }) => setTick(app, target.checked)}
checked={app.checked}
type="checkbox"
/>
Codesandbox: see line 25 -> 28 and line 48 in RightSection.tsx are the lines I added
For the two buttons select all and unselect all to update the state of the checkboxes, the data must be synchronized (here you declare active as json independent of each other, this makes the update logic complicated. Unnecessarily complicated, please fix it to sync
const [json, setJson] = useState(dummyJson);
const [activeId, setActiveId] = useState('cat1');
const active = useMemo(() => json[activeId], [json, activeId]);
and update depends:
<SidebarItem
key={name}
name={name}
{...{
isActive: id === activeId,
setActive: () => setActiveId(id)
}}
/>
Codesandbox: line 60 -> 63 and line 81 -> 82 in file App.js
https://codesandbox.io/s/musing-rhodes-yp40fi
the handleOperation function could also be rewritten very succinctly but that is beyond the scope of the question

Building a todo app in React, used filters but need a way to make sure "complete" button only removes one task instead of two

I'm new to learning react so I followed this tutorial https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components to create a todo app and then tweaked it to fit the requirements of the project I'm working on. Everything works the way it should except when I delete (complete) things from the associate side, it also deletes it from my main side as well. I understand the general concept of why that's happening (I don't have two separate lists in my code), just not sure how to go about fixing it without removing the filter I have in place. I had tried to implement a separate list for those tasks but just wasn't understanding how to go about it.
Added CodeSandBox for more context: https://codesandbox.io/s/hungry-sky-5f482?file=/src/index.js
Check task items and then view the items you've checked in "Show Associate Tasks." The issue is completing a task on the associate side also completes it on the "Show All Tasks" side.
App.js
const FILTER_MAP = {
All: () => true,
Associate: task => task.checked
};
const FILTER_NAMES = Object.keys(FILTER_MAP);
function App(props) {
const [tasks, setTasks] = useState(props.tasks);
const [filter, setFilter] = useState('All');
function toggleTaskChecked(id) {
const updatedTasks = tasks.map(task => {
if (id === task.id) {
return {...task, checked: !task.checked}
}
return task;
});
setTasks(updatedTasks);
}
function completeTask(id) {
const remainingTasks = tasks.filter(task => id !== task.id);
setTasks(remainingTasks);
}
const taskList = tasks
.filter(FILTER_MAP[filter])
.map(task => (
<Todo
id={task.id}
name={task.name}
checked={task.checked}
key={task.id}
toggleTaskChecked={toggleTaskChecked}
completeTask={completeTask}
/>
));
const filterList = FILTER_NAMES.map(name => (
<FilterButton
key={name}
name={name}
isPressed={name === filter}
setFilter={setFilter}
/>
));
function addTask(name) {
const newTask = { id: "todo-" + nanoid(), name: name, checked: false };
setTasks([...tasks, newTask]);
}
return (
<div className="app">
<h1 className = "tasks-header">Task Tracker</h1>
<Form addTask={addTask}/>
<div className="list-buttons">
{filterList}
</div>
<ul
role="list"
className="todo-list"
aria-labelledby="list-heading"
>
{taskList}
</ul>
</div>
);
}
export default App
Todo.js
export default function Todo(props) {
return (
<li className="todo stack-small">
<div className="c-cb">
<input id={props.id}
type="checkbox"
defaultChecked={props.checked}
onChange={() => props.toggleTaskChecked(props.id)}
/>
<label className="todo-label" htmlFor="todo-0">
{props.name}
</label>
</div>
<div className="btn-group">
<button type="button"
className="complete-button"
onClick={() => props.completeTask(props.id)}
>
Complete
</button>
</div>
</li>
);
}
index.js
const DATA = [
{ id: "todo-0", name: "Brush Teeth", checked: false },
{ id: "todo-1", name: "Make Dinner", checked: false },
{ id: "todo-2", name: "Walk Dog", checked: false },
{ id: "todo-3", name: "Run Reports", checked: false },
{ id: "todo-4", name: "Visit Mom", checked: false },
{ id: "todo-5", name: "Aerobics", checked: false },
{ id: "todo-6", name: "Project", checked: false },
{ id: "todo-7", name: "Lecture", checked: false },
{ id: "todo-8", name: "Have Lunch", checked: false }
];
ReactDOM.render(
<React.StrictMode>
<App tasks={DATA}/>
</React.StrictMode>,
document.getElementById('root')
);
FilterButton.js
function FilterButton(props) {
return (
<button
type="button"
className="toggle-btn"
aria-pressed={props.isPressed}
onClick={() => props.setFilter(props.name)}
>
<span className="visually-hidden">Show </span>
<span>{props.name}</span>
<span className="visually-hidden"> Tasks</span>
</button>
);
}
export default FilterButton;

We have 3 boolean fields: checked, completed, completedAssoc.
{
id: "todo-0",
name: "Brush Teeth",
checked: false,
completed: false,
completedAssoc: false
},
The filters will work as follows:
const FILTER_MAP = {
All: (task) => !task.completed,
Associate: (task) => task.checked && !task.completedAssoc
};
And finally changes in completeTask and addTask:
function completeTask(id) {
const complField = filter === "All" ? "completed" : "completedAssoc";
const updatedTasks = tasks.map((task) =>
id === task.id ? { ...task, [complField]: true } : task
);
setTasks(updatedTasks);
}
function addTask(name) {
const newTask = {
id: "todo-" + nanoid(),
name: name,
checked: false,
completed: false,
completedAssoc: false
};
setTasks([...tasks, newTask]);
}

Unable to successfully loop through a redux store after a dispatch function

I'm trying to add product items to my redux store called cart. After adding an item I then compare both stores product(redux store) and cart(redux store) to check if the product has the same itemCode(item code. if they do I would like to Hide the add button and show the remove button. Unfortunately I'm getting different results, please look at the picture below for reference:
interface IProps {
items: ItemInterface[];
documentItems: ItemInterface[];
onAddItem: any;
}
const ItemFlatList2: FC<Partial<IProps>> = ({
items,
documentItems,
onAddItem,
}) => {
return (
<div className={styles.container}>
<ul>
{items!.map((item) => {
return (
<div className={styles.itemContainer}>
<div key={item.itemCode}>
<li>{item.itemCode}</li>
<li>{item.itemDescription}</li>
{documentItems!.length === 0 ? (
<AddButton
title={"ADD"}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
) : (
documentItems!.map((documentItem) => {
if (documentItem.itemCode === item.itemCode) {
return <RedButton title={"Remove"} />;
}
if (documentItem.itemCode !== item.itemCode) {
return (
<AddButton
title={"ADD"}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
);
}
})
)}
</div>
<div>
<li>Hello world</li>
</div>
</div>
);
})}
</ul>
</div>
);
};
export default ItemFlatList2;
The Cart Store:
const initialState: Partial<DocumentDetailsInterface>[] = [
];
const cartStore = createSlice({
name: "quotation reducer",
initialState,
reducers: {
add: {
reducer: (
state,
{ payload }: PayloadAction<DocumentDetailsInterface>
) => {
state.push(payload);
},
prepare: (item) => ({
payload: item,
}),
},
edit: (state, { payload }) => {},
remove: (
state,
{ payload }: Partial<PayloadAction<DocumentDetailsInterface>>
) => {
const findItem = state.findIndex((item) => payload!.code === item.code);
if (findItem !== 1) {
state.splice(findItem, 1);
}
},
},
extraReducers: {},
});
and The Product Store:
const initialState: ItemInterface[] = [
{
_id: "sdfsd",
itemType: "Physical Item",
itemUnitOfMeasure: "Unit",
itemCode: "PPC10",
itemDescription: "PPC Cement",
itemCostPrice: 50,
itemSellingPrice: 80,
itemQuantity: 100,
vatStatus: "Standard rate 15%",
},
{
_id: "qew",
itemType: "Physical Item",
itemUnitOfMeasure: "Unit",
itemCode: "2",
itemDescription: "Sepako Cement",
itemCostPrice: 30,
itemSellingPrice: 60,
itemQuantity: 100,
vatStatus: "Standard rate 15%",
},
{
_id: "sdfsd",
itemType: "Physical Item",
itemUnitOfMeasure: "Unit",
itemCode: "1",
itemDescription: "PPC Cement",
itemCostPrice: 50,
itemSellingPrice: 80,
itemQuantity: 100,
vatStatus: "Standard rate 15%",
},
];
const itemSlice = createSlice({
name: "item reducer",
initialState,
reducers: {},
extraReducers: {},
});

It looks like you have wrong logic in you render method. You displayed "Add" button when there are no items in documentItems and the if any items inside you keep adding "Add" buttons if they are not equal to itemCode. So basically you have 2 loops. First is render items, and second one is to render buttons for each item. But you can use one loop to render items and have logic to check if that item is already in the documentItems array - if not then display "Add" button, else "Remove" button.
return (
<div className={styles.container}>
<ul>
{items!.map(item => {
return (
<div className={styles.itemContainer} key={item.itemCode}>
<div key={item.itemCode}>
<li>{item.itemCode}</li>
<li>{item.itemDescription}</li>
{documentItems!.findIndex(
documentItem => documentItem.itemCode === item.itemCode,
) === -1 ? (
<AddButton
title={'ADD'}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice,
)
}
/>
) : (
<RedButton title={"Remove"} />
)}
</div>
<div>
<li>Hello world</li>
</div>
</div>
);
})}
</ul>
</div>
);

I think you need to provide a unique key to button. Write the statemen when you are changing the state
<AddButton
title={"ADD"}
key={item.itemCode}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>

You used map function to check if item exists in the documentItems. I think changing it to some function will work out.
documentItems!.some((documentItem) => {
return documentItem.itemCode === item.itemCode
}
) ? (<RedButton title={"Remove"} />): (
<AddButton
title={"ADD"}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
);

How to change menu on button click?

I am trying to make an authentication based menus in react app.
Menu Data:
const menuItems = {
primaryMenus: [
{ title: 'Messages' },
{ title: 'Register' },
{
subMenus: {
title: 'Account',
menus: [{ title: "Profile" }, { title: "Change Password"}],
},
},
{ title: 'Help' }
],
};
From the above data, I need to build up the menu structure.
The code that I have tried so far
const menuItems = {
primaryMenus: [
{ title: 'Messages' },
{ title: 'Register' },
{
subMenus: {
title: 'Account',
menus: [{ title: "Profile" }, { title: "Change Password"}],
},
},
{ title: 'Help' }
],
};
function App() {
const [ isAuthenticated, setAuthenticated ] = React.useState(false);
return(
<div>
<button onClick={() => {setAuthenticated(!isAuthenticated)}}> {isAuthenticated ? 'Logout' : 'Login'} </button>
<ul className="menu">
{menuItems.primaryMenus.map((menu, i) => {
return (
!menu.subMenus ?
<li key={i}> {menu.title} </li>
:
<li key={i}>
{menu.subMenus.title}
<ul>
{ menu.subMenus.menus.map((submenu, j) => {
return <li key={j}> {submenu.title} </li>
}) }
</ul>
</li>
)
})}
</ul>
<h1> The menu Messages and Help will be there for both logged in user and logged out user </h1>
<br />
<h1> Whereas the Register menu will be available only if user is logged out </h1>
<br />
<h1> My Account menu and its submenus will be available only if user is logged in </h1>
</div>
)
}
ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/react#16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
Requirement:
Menu structure for logged in user:
- Messages
- Account
- Profile
- Change Password
- Help
Menu structure for logged out user:
- Messages
- Register
- Help
I can modify the provided json structure (menuItems) as well..
Kindly help me to achieve the above result.
I am new to react, so if anyone could provide me a solution in pure react way of authentication then it would be much more helpful for me..

I would recommend you changed the structure of the array menuItems. For example like this:
const menuItems = [
{ title: 'Messages', whenLoggedIn: true, whenLoggedOut: true },
{ title: 'Help', whenLoggedIn: true, whenLoggedOut: true },
{ title: 'Register', whenLoggedIn: false, whenLoggedOut: true },
{
title: 'Account',
whenLoggedIn: true,
whenLoggedOut: false,
subMenuItems: [{ title: 'Profile' }, { title: 'Change password' }],
},
];
Then you can use them like this:
const keepMenuItem = (menuItem, isAuthenticated) =>
(isAuthenticated && menuItem.whenLoggedIn)
|| (!isAuthenticated && menuItem.whenLoggedOut)
return (
<ul className="menu">
{menuItems.filter(menuItem => keepMenuItem(menuItem, isAuthenticated)
.map(menuItem => (
<li key={menuItem.title}>
{menuItem.title}
{!!menuItem.subMenuItems && (
<ul>
{menuItem.subMenuItems.map(subMenuItem => (
<li key={subMenuItem.title}>{subMenuItem.title}</li>
))}{' '}
</ul>
)}
</li>
))}
</ul>
);

Render a radio button as already selected on page load - React js

I have this component:
import React from 'react';
const options = [
{ label: "Lifestyle", value: "lifestyle"},
{ label: "Area", value: "area" },
{ label: "Random", value: "random" }
];
const ChannelCategory = props =>
props.visible ? (
<div>
{props.title}
<ul>
{options.map((option) => (
<li key={option.value}>
<label>
{option.label}
<input
className={props.className}
name={props.name} // need to be different
selected={props.selected === option.value} // e.g. lifestyle === lifestyle
onChange={() => props.onChange(option.value)}
type="radio"
/>
</label>
</li>
))}
</ul>
</div>
) : null;
export default ChannelCategory;
I am rendering it on another page here in a .map:
let displayExistingChannels = null;
if (channels !== null){
displayExistingChannels = (
channels.map(channel => {
return (
<Grid key={channel.key} item style={styles.gridItem} justify="space-between">
<ChannelListItem
channel={channel}
isSaving={isSaving}
onDeleteChannelClick={onDeleteChannelClick}
key={channel.key}
onFormControlChange={onFormControlChange}
onUndoChannelClick={onUndoChannelClick}
/>
{channel.category}
<ChannelCategory
visible={true}
onChange={value => setCategoryName(value)}
title="Edit Category"
selected={channel.category}
name={channel.key} // unique for every channel
/>
</Grid>
)
})
)
}
I am using fake data for the map:
const fakeChannelData = setupChannels(
[{id: "2f469", name: "shopping ", readOnly: false, category: "lifestyle"},
{id: "bae96", name: "public", readOnly: true, category: "null"},
{id: "06ea6", name: "swimming ", readOnly: false, category: "sport"},
{id: "7e2bb", name: "comedy shows ", readOnly: false, category: "entertainment"}]);
const [channels, setChannels] = useState(fakeChannelData);
Please can someone tell me why when I add selected={channel.category} in my .map function it does not show the selected category preselected on the FE on page load? Not sure where I have gone wrong? Thanks!

checked is the correct attribute to use for input tag, not selected.
<input
...
checked={props.selected === option.value}
...
/>
ref: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio