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

How to change state of selected chart but others who are not selected to use default state?

I try to change state of selected chart ( others who are not selected to use default state ), here is the list of charts in ChartWidget component which is child of SmartTradePageLayout:
const charts = [
{
title: 'Chart-1',
id: 0,
content: options,
isSelected: false,
},
{
title: 'Chart-2',
id: 1,
content: options2,
isSelected: false,
},
{
title: 'Chart-3',
id: 2,
content: options3,
isSelected: false,
},
{
title: 'Chart-4',
id: 3,
content: options4,
isSelected: false,
},
]
In this part of code I use map and with handle data function I change color of selected chart but state of others is also changed.
const handleData = (getData) => {
actions[uiActions.actionTypes.MULTICHART_UPDATES]({data: getData});
actions[uiActions.actionTypes.MULTICHART_INVOKED](getData);
setActive(getData.id);
}
charts.map((data, i) => {
return <div key={i} onClick={() => handleData(data)} className={active == i ?
'bg-primary border-inset rounded-top' : 'bg-secondary border-inset roundedtop'}>
<div className='p-1 cursor-pointer' > {data.title} </div>
<TradingViewWidget { ...data.content } />
</div>
}
In this action file for updating state, I use handleClick function and get data for selected chart but state is updated in all charts.
Here is also part of model where I use empty data object to catch data of selected chart.
const handleClick = ( actions, payload ) => {
const { data } = payload;
const { updateState } = actions;
if (data.isSelected == false){
updateState(data.isSelected = true);
console.log('data:', payload);
}
}
Model:
data: { },
Here is SmartTradePageLayout parent component:
const isContentAvailable = !isSingle ?
Boolean(!isEmpty(packsState.selectedPair) && !isEmpty(exchanges) &&
!isEmpty(packsState.exchangeData)) :
Boolean(!isEmpty(exchanges) && singlePair.mainCoin && singlePair.pairCoin );
!isContentAvailable ?
<div className="smart-trade-chart-container">
<ChartWidget defaultPair={DEFAULT_PAIR} />
</div> :
<div className="smart-trade-chart-container">
<ChartWidget/>
</div>

React JS Filter Methods: Hiding table columns using array filters and state

This is the code I am trying to rebuild using functional component, but my arrays do not behave correctly.
EXPECTED RESULT: https://stackblitz.com/edit/antd-showhidecolumns
My forked functional component version:
MY WORK https://stackblitz.com/edit/antd-showhidecolumns-rdyc8h
Main issue here is I am not able to show/hide column cells, I am not sure why my array is different when I use the same method as the original code.
My code:
const onChange = (e) => {
let { checkedColumns } = colmenu;
if (e.target.checked) {
checkedColumns = checkedColumns.filter((id) => {
return id !== e.target.id;
});
console.log('if checked columns is', checkedColumns);
} else if (!e.target.checked) {
checkedColumns.push(e.target.id);
console.log('elseif checked columns', checkedColumns);
}
const filtered = checkedColumns.filter((el) => {
return el.dataIndex !== checkedColumns.el;
});
console.log('filtered items', filtered);
setColmenu({ ...colmenu, columns: filtered });
};
working version from the old code (class component)
onChange = (e) => {
var checkedColumns = this.state.checkedColumns
if(e.target.checked){
checkedColumns = checkedColumns.filter(id => {return id !== e.target.id})
}
else if(!e.target.checked){
checkedColumns.push(e.target.id)
}
var filtered = this.state.initialColumns;
for(var i =0;i< checkedColumns.length; i++)
filtered = filtered.filter(el => {return el.dataIndex !== checkedColumns[i]})
this.setState({columns: filtered, checkedColumns: checkedColumns})
}

Something really went wrong with your code (or homework i guess?)
Please have a look at least at the docs for React.useState to set some basics.
First you should init your initalColumns and later you should filter on them.
Additional i init the checkColumns with the correct values and changed the wrong logic for changing them.
Have a look how the filtering is done via Array.includes maybe someone will ask for this ;-)
Another point is that you may split the state object in separate primitive states.
Nevertheless here is a working stackblitz and the depending code.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table, Button, Dropdown, Menu, Checkbox } from 'antd';
const App = () => {
const columns = [
{
title: 'Description',
dataIndex: 'description',
},
{
title: 'Employees',
dataIndex: 'employees',
},
];
const [colmenu, setColmenu] = React.useState({
value: false,
checkedColumns: ['description', 'employees'],
visibleMenuSettings: false,
columns,
initialColumns: columns,
});
const onChange = (e) => {
let { checkedColumns, columns, initialColumns } = colmenu;
if (!e.target.checked) {
checkedColumns = checkedColumns.filter((id) => {
return id !== e.target.id;
});
console.log('if checked columns is', checkedColumns);
} else if (e.target.checked) {
checkedColumns.push(e.target.id);
console.log('elseif checked columns', checkedColumns);
}
console.log(columns);
columns = initialColumns.filter((col) =>
checkedColumns.includes(col.dataIndex)
);
setColmenu({ ...colmenu, columns, checkedColumns });
};
const handleVisibleChange = (flag) => {
setColmenu({ ...colmenu, visibleMenuSettings: flag });
};
const menu = (
<Menu>
<Menu.ItemGroup title="Columns">
<Menu.Item key="0">
<Checkbox id="description" onChange={onChange} defaultChecked>
Description
</Checkbox>
</Menu.Item>
<Menu.Item key="1">
<Checkbox id="employees" onChange={onChange} defaultChecked>
Employees
</Checkbox>
</Menu.Item>
</Menu.ItemGroup>
</Menu>
);
const dataSource = [
{
key: '1',
description: 'Holiday 1',
employees: '79',
},
{
key: '2',
description: 'Holiday 2',
employees: '12',
},
{
key: '3',
description: 'Holiday 3',
employees: '0',
},
];
return (
<div>
<div className="row">
<div className="col-12 mb-3 d-flex justify-content-end align-items-center">
<Dropdown
overlay={menu}
onVisibleChange={handleVisibleChange}
visible={colmenu.visibleMenuSettings}
>
<Button>Show/Hide Columns</Button>
</Dropdown>
</div>
</div>
<div className="row">
<div className="col-12">
<Table
columns={colmenu.columns}
dataSource={dataSource}
size="small"
pagination={{
pageSizeOptions: ['20', '50'],
showSizeChanger: true,
}}
/>
</div>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('container'));

How can I get label from Picker onValueChange in react-native

I want to get the value of items(in RNPickerSelect).
ex1) if my items is uc, then I want to get the label("ucCollege") as this.state.text.
ex2) if this.state.main_cate is "portal", then I want to get the label of const nul.
Finally I want to print the label as text like last code line.
How can I do this?
const uc = [
{
label: "ucCollege",
value: "uc",
},
];
const isa = [
{
label: "isaCollege",
value: "isa",
},
];
const nul = [
{
label: "nulCollege",
value: "nul",
},
];
export default class URL extends Component {
constructor(props) {
super(props);
this.state = {
main_cate: undefined,
sub_cate: undefined,
text: undefined,
};
}
render() {
return (
<View>
...
<RNPickerSelect
placeholder={sub_placeholder}
items={
this.state.main_cate === "portal"
? nul
: this.state.main_cate === "uc"
? uc
: isa (Actually there is more, but i comfortably omit that)
}
onValueChange={(value, index) => {
this.setState({
sub_cate: value,
text: items[index].label, // this is the point !!!
});
}}
value={this.state.sub_cate}
//label={this.state.sub_cate}
/>
<Text>{this.state.text}</Text> // And I want to print text like this
</View>
);
}
}

instead of items, you can directly reference your uc array like this and the index will pick the label.
onValueChange={(value, index) => {
this.setState({
sub_cate: value,
text: uc[index].label, // this is the point !!!
});
}}
Complete Code:
const uc = [
{
label: "ucCollege",
value: "uc",
},
];
const isa = [
{
label: "isaCollege",
value: "isa",
},
];
const nul = [
{
label: "nulCollege",
value: "nul",
},
];
export default class URL extends Component {
constructor(props) {
super(props);
this.state = {
main_cate: undefined,
sub_cate: undefined,
text: undefined,
};
}
render() {
return (
<View>
...
<RNPickerSelect
placeholder={sub_placeholder}
items={
this.state.main_cate === "portal"
? nul
: this.state.main_cate === "uc"
? uc
: isa //(Actually there is more, but i comfortably omit that)
}
onValueChange={(value, index) => {
this.setState({
sub_cate: value,
// instead of items you can directly refference your uc array like this
text: uc[index].label, // this is the point !!!
});
}}
value={this.state.sub_cate}
//label={this.state.sub_cate}
/>
<Text>{this.state.text}</Text> // And I want to print text like this
</View>
);
}
I hope this will help you out!

ReactJS How to use Refs on components rendered dinamically by another render function to focus elements?

I have a class component that Renders a list of elements and I need to focus them when an event occurs.
Here is an example code
class page extends React.Component {
state = {
items: [array of objects]
}
renderList = () => {
return this.state.items.map(i => <button>{i.somekey}</button>)
}
focusElement = (someitem) => {
//Focus some item rendered by renderList()
}
render(){
return(
<div>
{this.renderList()}
<button onClick={() => focusElement(thatElement)}>
</div>
)
}
}
I know that I need to use refs but I tried several ways to do that and I couldn't set those refs properly.
Can someone help me?

you should use the createRefmethod of each button that you would like to focus, also you have to pass this ref to the focusElement method that you have created:
const myList = [
{ id: 0, label: "label0" },
{ id: 1, label: "label1" },
{ id: 2, label: "label2" },
{ id: 3, label: "label3" },
{ id: 4, label: "label4" },
{ id: 5, label: "label5" }
];
export default class App extends React.Component {
state = {
items: myList,
//This is the list of refs that will help you pick any item that ou want to focus
myButtonsRef: myList.map(i => React.createRef(i.label))
};
// Here you create a ref for each button
renderList = () => {
return this.state.items.map(i => (
<button key={i.id} ref={this.state.myButtonsRef[i.id]}>
{i.label}
</button>
));
};
//Here you pass the ref as an argument and just focus it
focusElement = item => {
item.current.focus();
};
render() {
return (
<div>
{this.renderList()}
<button
onClick={() => {
//Here you are able to focus any item that you want based on the ref in the state
this.focusElement(this.state.myButtonsRef[0]);
}}
>
Focus the item 0
</button>
</div>
);
}
}
Here is a sandbox if you want to play with the code