Actualmente, mi código funciona, pero siento que no estoy usando useState/useEffect de la manera correcta para mi objetivo final. Entonces, para explicarle al padre, tengo un botón con onClick en un componente diferente, que está pasando el estado/conteo a otro componente "FlexContainer", en ese componente estoy usando .push para agregar el componente "FlexItem" cada vez que aumenta el conteo ( que está funcionando). Pero lo que estoy tratando de hacer ahora es agregar un botón dentro del componente "FlexItem", que al hacer clic eliminará uno de los "FlexItem" del conteo. Fue entonces cuando me di cuenta de que mi function displayFlexItem() probablemente no sea la mejor solución para lo que estoy tratando de hacer.
Componente principal
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> ) }Contenedor flexible
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)Solo maneja el recuento pero no los elementos, por lo que no puede verificar qué elemento se elimina para la actualización del estado.
Deberías usar una matriz en su lugar
const [addFlexItem, setAddFlexItem] = useState([]) Para el conteo, puede usar addFlexItem.length que es para obtener la coincidencia de la longitud de la matriz con su conteo.
Además, los valores useState y useEffect siempre están alineados con los valores addFlexItem del componente superior, por lo que no necesita usarlos, pero si desea actualizar addFlexItem en FlexContainer , puede pasar setAddFlexItem a 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> ) } Su componente Post puede ser
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> ) } Para agregar un nuevo elemento a addFlexItem
setAddFlexItem([...addFlexItem, currentIndex++]) //increase your current index every time once the new item added