Updating array of objects by using useState hook in reactjs - reactjs

I have this state of array of object. I use them to create three cards.
const [option, setOption] = useState([{
id: 1,
label: "Borrowers",
icon: FcApprove,
counter: 2,
link: "borrowers",
color: "#5d8c6d",
isActive: false,
},
{
id: 2,
label: "My Offer",
icon: FaHandsHelping,
counter: 2,
link: "offer",
color: "#04738a",
isActive: false,
},
{
id: 3,
label: "Promise",
icon: FaPrayingHands,
counter: 2,
link: "promise",
color: "#40437a",
isActive: false,
}
]);
Whenever one of these cards is clicked, I would like to update the field isActive to true as follows.
function FixedHeader() {
const [options, setOptions] = useState(option); //option is the above mentioned array of object
const handleChange = (opt) => {
setOption([option[index].isActive: true])
}
return < > {
options.map((opt, index) => {
<Card onClick={handleChange(opt,index)} key={index} className={opt.isActive ? "activecard": ""}>
<CardContent>
<Stack direction="column">
<opt.icon size={20}/>
<Typography>opt.label</Typography>
</Stack>
</CardContent>
</Card>
})
}
My code somewhat looks the above one. but it is not literally changing isActive filed

You are mutating the options array. When you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
Below will fix your issue
const handleChange = (options, index) => {
setOption(options.map((option, i) => ({...option, isActive: i === index }));
}

options is an array. You will want to map the previous state array to the next state array, updating the specific element object by the id property.
const [options, setOptions] = useState(option);
// Curried function to close over option id in callback scope
const handleChange = (id) => () => {
setOption(options => options.map(option => option.id === id
? { ...option, isActive: true }
: option
);
}
options.map((opt) => (
<Card
key={opt.id}
onClick={handleChange(opt.id)}
className={opt.isActive ? "activecard" : ""}
>
<CardContent>
<Stack direction="column">
<opt.icon size={20} />
<Typography>opt.label</Typography>
</Stack>
</CardContent>
</Card>
)

There are several issues going on here, the first being you should be using the useCallback hook when you are updating anything set in useState:
export default function FixedHeader() {
const [options, setOptions] = useState(myOptions);
const onClick = useCallback((id) => {
setOptions(options.map((opt) => {
if (opt.id === id) {
opt.isActive = !opt.isActive
}
return opt
})
)}, [options])
return (
<div>
{
options.map((option) => (
<div style={{ backgroundColor: option.isActive ? 'blue' : 'red' }}>
<button onClick={() => onClick(option.id)}>{option.label}</button>
</div>
))
}
</div>
);
}
Note that I was rendering something different than you to test this out, so make sure instead of passing in the index you pass the option.id like so:
onClick={() => onClick(option.id)}

Related

React doesnt update state immidiately after dropdown selected

I have some update state problems when the dropdown is selected.
The useEffect doesnt update the state immidiately when its selected.
I want my listngs array updated immidiately whenever the selected filter changes.
Thanks
Code
const dropdowns = [
{ icon: '', title: 'Top ratings', color: 'warning' },
{ icon: '', title: 'Worst ratings', color: 'warning' },
]
const [selectedFilter, setSelectedFilter] = useState("")
useEffect(() => {
if (selectedFilter === 0) {
var sorted = listings.sort((a, b) => { return b.rating - a.rating })
setListings(sorted)
console.log(listings)
} else {
var sorted = listings.sort((a, b) => { return a.rating - b.rating })
setListings(sorted)
console.log(listings)
}
}, [selectedFilter])
<Dropdown.Menu className='w-100'>
{dropdowns.map(({ icon, title }, indx) => (
<Dropdown.Item
key={indx}
as='button'
eventKey={title}
onClick={() => {
setSelectedFilter(indx)
}}>
<i className={`${icon} fs-lg opacity-60 me-2`}></i>
{title}
</Dropdown.Item>
))}
</Dropdown.Menu>
You probably will find it useful to read through the "You might not need an effect", in particular the "Updating state based on props or state" section.
Ultimately you don't need an effect to compute derived data, you should just do that directly in render.
const dropdowns = [
{ icon: '', title: 'Top ratings', color: 'warning' },
{ icon: '', title: 'Worst ratings', color: 'warning' },
]
const [selectedFilter, setSelectedFilter] = useState("")
const sortedListings = selectedFilter === 0 ?
[...listings].sort((a, b) => b.rating - a.rating) :
[...listings].sort((a, b) => a.rating - b.rating);
<Dropdown.Menu className='w-100'>
{dropdowns.map(({ icon, title }, indx) => (
<Dropdown.Item
key={indx}
as='button'
eventKey={title}
onClick={() => {
setSelectedFilter(indx)
}}>
<i className={`${icon} fs-lg opacity-60 me-2`}></i>
{title}
</Dropdown.Item>
))}
</Dropdown.Menu>
The other thing worth noting is in your useEffect you're mutating listings which is most likely not desirable; instead you should clone the array then sort (hence [...listings].sort() rather than listings.sort()).

Can I change a element state in react without changing every element state?

im making a portfolio website and have multiple different buttons with skills which contain an img and p tag. I want to show the description of each tag everytime a user clicks on the button. how can I do this? right now everytime user clicks it, all buttons show description.
const Skills = () => {
const [state, setState] = useState(false)
let skills = [
{ id: 1, desc: 'HTML5', state: false, img: htmlIcon },
{ id: 2, desc: 'CSS3', state: false, img: cssIcon },
{ etc....}
const showDesc = (id) => {
console.log(skills[id-1] = !state);
setState(!state)
}
return (
{skills.map(skill => (
<button onClick={(id) => showDesc(skill.id)}>
<img style={ state ? {display:'none'} : {display:'block'}} src={skill.img} />
<p style={ state ? {display:'block'} : {display:'none'}}>{skill.desc}</p>
</button>
))}
I recommend to manipulate element state instead of entry list. But if you really need to manipulate entry list you should add that list to your state. Then when you want to show/hide specific item, you need to find that item in state and correctly update entry list by making a copy of that list (with updated item). For example you can do it like this:
import React, { useState } from 'react';
const Skills = () => {
const [skills, setSkills] = useState([
{
id: 1,
desc: 'HTML5',
state: false,
img: htmlIcon, // your icon
},
{
id: 2,
desc: 'CSS3',
state: false,
img: cssIcon, // your icon
},
]);
const showDesc = (id) => {
const newSkills = skills.map((item) => {
if (item.id === id) {
return {
...item,
state: !item.state,
};
}
return item;
});
setSkills(newSkills);
};
return (
<div>
{skills.map(({
id,
img,
state,
desc,
}) => (
<button type="button" key={id} onClick={() => showDesc(id)}>
<img alt="img" style={state ? { display: 'none' } : { display: 'block' }} src={img} />
<p style={state ? { display: 'block' } : { display: 'none' }}>{desc}</p>
</button>
))}
</div>
);
};
Instead of manipulating all list, you can try to move show/hide visibility to list item itself. Create separate component for item and separate component for rendering that items. It will help you to simplify logic and make individual component responsible for it visibility.
About list rendering you can read more here
For example you can try something like this as alternative:
import React, { useState } from 'react';
const skills = [
{
id: 1,
desc: 'HTML5',
img: htmlIcon, // your icon
},
{
id: 2,
desc: 'CSS3',
img: cssIcon, // your icon
},
];
const SkillItem = ({
img,
desc = '',
}) => {
const [visibility, setVisibility] = useState(false);
const toggleVisibility = () => {
setVisibility(!visibility);
};
const content = visibility
? <p>{desc}</p>
: <img alt="img" src={img} />;
return (
<div>
<button type="button" onClick={toggleVisibility}>
{content}
</button>
</div>
);
};
const SkillList = () => skills.map(({
id,
img,
desc,
}) => <SkillItem img={img} desc={desc} key={id} />);

How do I disable a button in react hooks that has a setState function already inside the onClick?

I am trying to disable a like button that already has an useState for incrementing the likes. And I wanted to disable the button once its clicked.
I would appreciate some help. Thank You!
const allItems = [
{
id: 1,
name: "The Rise and Decline of Patriarchal Systems",
image: "https://img.thriftbooks.com/api/images/i/m/8ECA8C9BAF351D13622ADFFBFA8A5D4E2BAABAFF.jpg",
likes: 3359,
price: 1
}
]
const Shop = () => {
const [items, setItems] = React.useState({allItems, disable: false})
const updateLike = (item) => setItems(items.map(indItem => {
if (indItem !== item) {
return indItem
}
else {
return {...item, likes: item.likes + 1}
}
}))
const listItemsToBuy = () => items.map((item) => (
<div key={item.id} className="card"></div>
<div className="font-text"><h2>{`${item.name}`}</h2>
</div>
<h2>Likes: {item.likes}</h2>
<div>
<button items={items} onClick={()=> updateLike(item, true)}> Like </button>
));```
Inside updateLike function update your state
setItems(prevState => { ...prevState, disable: true, })
Then your button will be look like
<button disabled={items.disabled} >
But preferable to have separate state for this purpose

How do i select all checkboxes in Javascript?

I am a beginner with javscript So i will be thankful for explanation.
{isolate_list.map((row) => {
return (
<FormControlLabel
control={
<Checkbox
color="primary"
checked={!!checked}
onChange={toggleCheckbox}
name="checkedA"
>
{" "}
</Checkbox>
}
label={row.isolatename}
>
{""}
</FormControlLabel>
);
})}
and i have this button
<Button
onClick={selectall}
style={{ margin: 50 }}
variant="outlined"
label="SELECT ALL ISOLATES"
>
SELECT ALL ISOLATES
</Button>
Can anyone help how can i use the button to select all checkboxes and in the same time i can select every checkbox alone by clicking on it?
I beginn with this part but i am not sure
const [checked, setChecked] = React.useState(true);
const toggleCheckbox = (event) => {
setChecked(event.target.checked);
};
You should hold checkbox value's in the and give the state value as a property to each. For example
<Checkbox
color="primary"
onChange={toggleCheckbox}
name="checkedA"
value={checked}
>
And then in the onClick function
setChecked();
The simplest implementations(without any form manager):
Declare state to store our checked ids array.
const [checkedIds, setCheckedIds] = useState([]);
implement handler.
const handleCheck = useCallback((id) => {
return () => {
setCheckedIds(prevIds => prevIds.includes(id) ? prevIds.filter(item => item !== id) : [...prevIds, id]);
};
}, []);
render our checkboxes and apply handler.
list.map(({ id, isolatename }) => (
<FormControlLabel
key={id}
control={
<Checkbox
color="primary"
checked={checkedIds.includes(id)}
onChange={handleCheck(id)}
name={`checkbox_${id}`}
/>
}
label={isolatename}
/>)
))
ps. in case if <Checkbox/> props 'onChange' returns callback like this (isChecked: boolean) => {} we can simplify (2) step.
const handleCheck = useCallback(id => {
return isChecked => {
setCheckedIds(prevIds => isChecked ? prevIds.filter(item => item == id) : [...prevIds, id]);
};
}, []);
You may remember that it is React JS and not only JS that we are talking about.
In React you want to control data in the way of a state. There are a lot of ways to do so with check boxes, I'm contributing with one that you can see in the code snippet below:
import React, {useState} from "react";
export default function CheckBoxesControllers() {
const [checkboxes, setCheckboxes] = useState(() => [
{ id: "0", checked: false },
{ id: "1", checked: false },
{ id: "2", checked: false },
]);
const handleUpdate = (event) => {
const { target: {id, checked} } = event;
setCheckboxes(currentState => {
const notToBeUpdated = currentState.filter(input => input.id !== id);
return [
...notToBeUpdated,
{ id, checked }
]
});
}
function toggleSelectAll() {
setCheckboxes(currentState => currentState.map(checkbox => ({...checkbox, checked: !checkbox.checked})));
}
return (
<>
{checkboxes?.length ? (
checkboxes.map((checkbox, index) => {
return (
<input
checked={checkbox.checked}
id={checkbox.id}
key={index}
type="checkbox"
onChange={event => handleUpdate(event)}
/>
);
})
) : <></>}
<button onClick={toggleSelectAll}>Toggle Select All</button>
</>
)
}
This code is meant to serve you as an example of how to work properly with react state in the hook way, but there are other way, as you can see in the Documentation

React Js / Menu with menu item drop down and menu item active State

hi i have a menu with tag structure < li> < a> and some of these menu items will be dropdown
then I created a state array to store all my menu items and when one is clicked it needs to be true and all the others are false, that is, in this array only one item can be true, with that I can show my dropdown item or even even apply a css effect to my active item, but for some reason my state never changes to true when clicked:
code:
const MenuItem = ({ tag, visibleMenu }) => {
const { name, link, dropdownItems } = tag;
return (
<NavLi>
<a>{name}</a>
{visibleMenu[name] && dropdownItems ? (
<DropDown>
{dropdownItems.map(item => (
<li>
<a href={item.link}>{item.name}</a>
</li>
))}
</DropDown>
) : (
""
)}
</NavLi>
);
};
const MenuBar = props => {
const MenuTags = [
{
name: "home",
link: "/",
dropdownItems: [
{ name: "one", link: "/aa" },
{ name: "two", link: "/b/" }
]
},
{
name: "about",
link: "../abovisibleMenuut",
dropdownItems: [
{ name: "one", link: "/aa" },
{ name: "two", link: "/b/" }
]
},
{ name: "not dropdown", link: "../dashboard" },
{ name: "not dropdown", link: "../dashboard/about" }
];
const [visibleMenu, setVisibleMenu] = useState(
MenuTags.reduce((r, e) => ((r[e.name] = false), r), {})
),
onUpdateVisibility = item => {
const visibleMenuCopy = { ...visibleMenu };
Object.keys(visibleMenuCopy).forEach(
key => (visibleMenuCopy[key] = key === item)
);
setVisibleMenu(visibleMenuCopy);
};
console.log(visibleMenu);
return (
<NavUl isOpen={props.isOpen}>
{MenuTags.map(item => (
<MenuItem
tag={item}
visibleMenu={visibleMenu}
onClick={() => onUpdateVisibility(item)}
/>
))}
<li>
<FontAwesomeIcon
onClick={() => props.setOpenBox(!props.isOpen)}
className="searchIcon"
rotation={90}
icon={faSearch}
size="1x"
fixedWidth
color="rgba(0, 0, 0, 0.08);"
/>
</li>
</NavUl>
);
};
example:
https://codesandbox.io/s/lucid-sammet-9qim9
I believe my problem is in my state:
const [visibleMenu, setVisibleMenu] = useState(
MenuTags.reduce((r, e) => ((r[e.name] = false), r), {}),
),
onUpdateVisibility = item => {
const visibleMenuCopy = { ...visibleMenu };
Object.keys(visibleMenuCopy).forEach(
key => (visibleMenuCopy[key] = key === item),
);
setVisibleMenu(visibleMenuCopy);
};
{MenuTags.map(item => (
<MenuItem
tag={item}
visibleMenu={visibleMenu}
onClick={() => onUpdateVisibility(item)}
/>
))}
But it was the only way I found to make only one state true at a time when it is clicked
The issue was that the event handler was on a component that didn't return any concrete HTML elements. MenuTag returns NavLI, which is a styled component, which returns an li. I'm no master of styles components, but I think in general, event handlers need to be attached to DOM elements, not abstract React components.
Also, I think you can simplify this dramatically. What about this:
const [visible, setVisible] = useState('none'),
{MenuTags.map( (item, index) => (
<MenuItem
key={index}
tag={item}
visibleMenu={visible === index ? true : false}
onClick={() => setVisible(index)}
/>
))}
So what this does is say that within this component, we keep track of which item is visible with the visible state variable, which will be the index of the visible item. The onClick handler changes this value to the index of the clicked item. Then your prop visibleMenu will check this condition, making sure the index of that MenuTag is the same as the one in state.
Edit
I changed a few things. Instead of controlling the state from within MenuItem, we just pass a few props to MenuItem, and control them inside of MenuItem's subcomponent, NavLI, which accepts event handlers
const MenuBar = props => {
const [visible, setVisible] = useState('none')
console.log(visible);
return (
<NavUl isOpen={props.isOpen}>
{MenuTags.map( (item, index) => (
<MenuItem
key={index}
index={index}
tag={item}
setVisible={setVisible}
visibleMenu={visible === index ? true : false}
/>
))}
// Inside NavLI
const MenuItem = ({ tag, visibleMenu, setVisible, index }) => {
...
return (
<NavLi onMouseEnter={ () => { console.log(index); setVisible(index) }}
onMouseLeave={() => { setVisible('none')}} >
...
I changed the handlers to onMouseEnter and onMouseLeave. onClick will work, but you'd need a global event handler for the page to setVisible back to 'none', so that when you click anywhere else on the page, the tabs close. There's more nuance there than that, but my example should work.
Working Codesandbox

Resources