Currently my code is working but I feel i'm not using the useState/useEffect the correct way for my end goal. So to father explain, I have a button with onClick in a different component, which is passing the state/count to another component "FlexContainer", in that component im using .push to add the component "FlexItem" each time the count increases (which is working). But what im trying to do now is add a button inside the "FlexItem" component, that when clicked it will remove one of the "FlexItem's" from the count. This is when I realized my function displayFlexItem() is probably not the best solution to use for what im trying to do.
Parent Component
export default function Post({ globalProps, sidebarProps }) {
const [addFlexItem, setAddFlexItem] = useState(0)
const [addFlexItemStyles, setFlexItemStyles] = useState('')
return (
<Layout globalProps={globalProps}>
<main className={styles.container}>
<FlexSidebar sidebarProps={sidebarProps} onClick={() => setAddFlexItem(addFlexItem + 1)} handleOnChange={(value) => setFlexItemStyles(value)} />
<FlexContainer addFlexItem={addFlexItem} addFlexItemStyles={addFlexItemStyles} />
</main>
</Layout>
)
}
FlexContainer
const FlexContainer = ({ addFlexItem }) => {
const [isaddFlexItem, setaddFlexItem] = useState(addFlexItem)
useEffect(() => {
setaddFlexItem(addFlexItem)
}, [addFlexItem])
function displayFlexItem() {
let flexitem = []
for (let i = 0;i < isaddFlexItem;i++) {
flexitem.push(
<FlexItem key={i} itemCount={i} />
)
}
return flexitem || null
}
return (
<section className={styles.right_content} style={{ flexDirection: isaddFlexItemStyles, alignItems: 'flex-start' }}>
{displayFlexItem()}
</section>
)
}
const [addFlexItem, setAddFlexItem] = useState(0)
You only handle the count but not items, so you cannot check which item gets removed for state update.
You should use an array instead
const [addFlexItem, setAddFlexItem] = useState([])
For the count, you can use addFlexItem.length which is to get the array length matching with your count.
Furthermore, useState and useEffect values are always aligned with the upper component's addFlexItem values, so you don't need to use them, but if you want to update addFlexItem in FlexContainer, you can pass setAddFlexItem into FlexContainer.
//converted your display flex item to a component
const DisplayFlexItem = ({ flexItems, removeFlexItem }) => {
return flexItems.map((item) => (<>
<FlexItem key={item} itemCount={item} />
<button onClick={() => { removeFlexItem(item) }}>Remove</button>
</>))
}
const FlexContainer = ({ addFlexItem, setAddFlexItem, addFlexItemStyles }) => {
return (
<section className={styles.right_content} style={{ flexDirection: isaddFlexItemStyles, alignItems: 'flex-start' }}>
<DisplayFlexItem flexItems={addFlexItem} removeFlexItem={(item) => {
const newAddFlexItem = addFlexItem.filter((currentItem) => currentItem !== item)
setAddFlexItem(newAddFlexItem)
}}/>
</section>
)
}
Your Post component can be
let currentIndex = 0 //keep your index in track
export default function Post({ globalProps, sidebarProps }) {
const [addFlexItem, setAddFlexItem] = useState([])
const [addFlexItemStyles, setFlexItemStyles] = useState('')
return (
<Layout globalProps={globalProps}>
<main className={styles.container}>
<FlexSidebar sidebarProps={sidebarProps} onClick={() => setAddFlexItem([...addFlexItem, currentIndex++])} handleOnChange={(value) => setFlexItemStyles(value)} />
<FlexContainer addFlexItem={addFlexItem} setAddFlexItem={setAddFlexItem} addFlexItemStyles={addFlexItemStyles} />
</main>
</Layout>
)
}
To add a new item to addFlexItem
setAddFlexItem([...addFlexItem, currentIndex++]) //increase your current index every time once the new item added