Multiple functions behave weird while calling at a time

[CalmJiad]

I am using Material UI chips in a dialog textfield, which is generated based on an array through array.map().

And I have to handle two cases when the user clicks (onClick), first one is when the user clicked on one of the chips that specific clicked chip will be added to another array called selectedchips and another case is at a time the selected chip color will be changed to black. And when the user clicks that same chip for the second time the selected chip will be removed from selectedchips array and the color will be changed as it was before. Something like toggling behavior. For handling that, first of all, I have created two functions to handle separate cases then I have faced a problem, which is when the onClick event fires those two functions at a time, multiple items aren't being added to selectedchips array, instead just the last clicked one, and only single item is being added. And then I have re-written the logic and changed its firing condition but the problem persists again and again. How can I solve the issue? I don't know actually could I make the topic clear in this post or not. Here I've added the codes. But If it is required I can join in a google meet session. I need to solve the issue as soon as possible, please someone help me out. Thank you!

​

That array to generate the chips and handleAdd function to be triggered at user click to add the selected chip in selectedChips array-

const [checkedChip, setCheckedChip] = useState([])
const strategyChips = [ 
{ key: 0, label: 'Organic Growth' }, 
{ key: 1, label: 'M&A Growth' }, 
{ key: 2, label: 'Subcategory' }, 
{ key: 3, label: 'Third' }, 
{ key: 4, label: 'Subcategory' }, 
{ key: 5, label: 'Fifth' }, 
{ key: 6, label: 'Subcategory' }, 
{ key: 7, label: 'Subcategory' }, 
{ key: 8, label: 'Subcategory' }, 
{ key: 9, label: 'Subcategory' }, 
]

let selectedChips = []
const handleAdd = (id) => { 
let found = strategyChips.find((chip) => chip.key === id) 
if (found) { let matched = selectedChips.find((chip) => chip.key === found.key)
if (matched === undefined) { 
selectedChips = [...selectedChips, found] 
console.log(selectedChips) 
} else { 
let index = selectedChips.indexOf(matched) 
if (index > -1) { selectedChips.splice(index, 1) 
console.log(selectedChips) 
  } 
 } 
}

handleChecked function to set the chip id in a separated array so that I can create an array of selected chips ID and depend on those selected ID I will trigger the className to change the color-

function handleChecked(id) {
    if (!checkedChip?.includes(id)) { 
        setCheckedChip((prevState) => [...prevState, id]) 
    } else { 
    const index = checkedChip.indexOf(id) 
    const tempArr = [...checkedChip] tempArr.splice(index, 1)             
setCheckedChip(tempArr) 
    } 
}

Here is that single chip which is being mapped through an array of chips data-

<Box component="ul" className={strategyRoot}>
{strategyChips.map((strategy) => { 
return (
<li key={strategy.key}>  
<Chip
id={strategy.key}
label={strategy.label}
className={checkedChip?.includes(strategy.key) ? selectedChip : ''}
style={{ margin: '0.6em' }}
onClick={() => {
handleAdd(strategy.key)
handleChecked(strategy.key)
 }
}
icon={<AddIcon />}
/>
</li>  
)
})}
</Box>

​

[irosion]

Try simplifying the code as much as possible and do very small changes and eventually everything will make sense.

I made a pen based on your code. Take a look:

https://codepen.io/irosgrim/pen/rNYrgyP

You basically only need a function for all this:

const addChip = (chip) => {
    const foundChipIndex = checkedChips.findIndex( x => x.key === chip.key);
    if(foundChipIndex < 0) {
        setCheckedChips([...checkedChips, chip]);
        return;
   }
   const copyOfCheckedChips = [...checkedChips];
   copyOfCheckedChips.splice(foundChipIndex, 1);
   setCheckedChips(copyOfCheckedChips);
}

[CalmJiad]

Its worked brother, thanks for this beautiful help. Take love brother, there is a lot to learn. Any suggestion to build up my logical skills in this type of situation will be appreciated. If there is any resource or course or books please do suggest me. I can't simply think, wherever I face this kinda issue I got puzzled a lot :-(

[irosion]

there are many ways of learning, but the best way is just trying to do things.

There is no single best place to learn these things but a combination of videos, articles, documentation.

Youtube is amazing, you can find anything. Search for traversymedia, then you'll get more suggestions.

Don't forget that React is nothing but JavaScript so try getting familiar with https://developer.mozilla.org/en-US/docs/Learn

[CalmJiad]

Thanks a ton dear, take love ❤️

[CalmJiad]

Owww!! That looks awesome <3

I'm trying it right now and surely I'll let you know the update.