Теряется свойства selected. В родительском элементе все меняется. Но в children приходит undefined
{Array.from({ length: 72 }, (_, index: any) => {
if (state.warehouse && state.warehouse[selected] && state.warehouse[selected][index]) {
return (
<section key={index} onClick={() => {
setSelectedCell(index)
}}>
<ItemCell
index={index}
change={changeSelection}
selected={selectedCell}
img={state.warehouse[selected][index]!.img}
count={state.warehouse[selected][index]!.count}
selectedFilter={selected}
/>
</section>
);
} else {
return (
<section key={index + 'new'} >
<ItemCell index={index} change={changeSelection} selectedFilter={selected} />
</section>
);
}
})}
const ItemCell = ({ index, change, selected, img, }: Props) => {
return (
<>
{
img ? (
<div
className={"draggable " + cls({ [s.ItemCell]: true, [s.ItemCell_exist]: img && index !== selected, [s.ItemCell_selected]: index === selected, [s.ItemCell_element]: dragging })}
// onMouseDown={onClickDown}
id={index.toString()}
onDragStart={() => {
return false;
}}
>
{
img ? <img className="" src={require(`../ItemInfo/img/${img}`)} alt='' /> : ''
}
</div >
) : (
<div className={'droppable ' + cls({ [s.ItemCell]: true, [s.ItemCell_exist]: img && index !== selected, [s.ItemCell_selected]: index === selected, [s.ItemCell_target]: false })} id={index.toString()}>
{
img ? <img src={require(`../ItemInfo/img/${img}`)} alt='' /> : ''
}
</div >
)
}
</>
)
};
export default ItemCell;