Tengo el siguiente código, cuyo propósito es reutilizarlo dentro de otro componente, y doy un enlace diferente de acuerdo con la identificación de mi objeto y mi retorno de API.
El problema es que, cómo estoy usando una función de mapa, está reproduciendo el mismo botón varias veces en la pantalla. Quiero saber cómo consigo sólo un botón. ¿Puedo de alguna manera usar indexOf dentro de ese mapa? Todo lo demás está funcionando bien
const ButtonGroup = (linksReturn) => { return linksReturn.map((urlAdress, index) => ( <div key={index}> <button target="_blank" href={urlAdress["detailsUrl"]} > Acess Link </button> </div> )); }; const PreviewActions = ({ linksReturn }) => { return <div>{ButtonGroup(linksReturn)}</div>; }; export default PreviewActions;Esta es la parte del código donde reutilizo el botón
import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import PreviewActions from './PreviewActions'; // ** Store & Actions import { getInfo } from '../store/actions/index'; import { useDispatch, useSelector } from 'react-redux'; const LicitacaoPreview = () => { const dispatch = useDispatch(); const store = useSelector((state) => state.allInfo); const { id } = useParams(); useEffect(() => { dispatch(getInfo(id)); }, [dispatch]); return typeof store.lotesData === 'object' ? ( <div> <PreviewActions id={id} linksReturn={store.infoData} /> </div> ) }; export default LicitacaoPreview;Array.prototype.map() no funciona así, llama a la función pasada como argumento en cada elemento de la matriz y devuelve la matriz resultante.
Un mejor enfoque sería usar Array.prototype.slice() para devolver una parte específica de la matriz original y luego usar map() en ella
const ButtonGroup = (linksReturn) => { const newArr = linksReturn.slice(startindex, endindex); // replace with your index appropriately return newArr.map((urlAdress, index) => ( <div key={index}> <button target="_blank" href={urlAdress["detailsUrl"]} > Acess Link </button> </div> )); };