¿Cómo puedo pasar el índice de la función de filtro a la función de mapa? Nota: si agrego el índice como parámetro de la función de mapa, no es el índice en la matriz original, sino solo los elementos del filtro.
{itemArray.filter((item, index) => item.type === compItem.type) .map((item) => { return ( <Row> <Col key={item.name} onClick={(e) => openItemEdit(e, index, item)} > {item.name} </Col> </Row> ); })}Estoy iterando sobre un conjunto de claves que rodean este código para agrupar los elementos en sublistas. Tengo una solución alternativa para guardar el elemento antes de editarlo y luego encontrarlo en la matriz original después de editarlo, pero usar el índice debería ser mucho más rápido.
Si desea saber el índice que tenía en la matriz original sin filtrar, entonces creo que la solución más simple es eliminar el uso de .filter y usar esa matriz original directamente, de la siguiente manera:
{itemArray.map((item, index) => { if (item.type !== compItem.type) { return null; } return ( <Row> <Col key={item.name} onClick={(e) => openItemEdit(e, index, item)}> {item.name} </Col> </Row> ); })}Puede asignar cada objeto a un nuevo objeto primero, que contenga el índice original.
{ itemArray .map((item, index) => ({ ...item, index })) .filter(item => item.type === compItem.type) .map(({ index, ...item }) => ( <Row> <Col key={item.name} onClick={(e) => openItemEdit(e, index, item)} > {item.name} </Col> </Row> )) }Un enfoque menos funcional sería empujar el JSX a una matriz cuando se cumpla la condición, en lugar de filtrar.
{ (() => { const jsx = []; itemArray.forEach((item, index) => { if (item.type === compItem.type) { jsx.push( <Row> <Col key={item.name} onClick={(e) => openItemEdit(e, index, item)} > {item.name} </Col> </Row> ); } }); return jsx; })() }