Estoy llamando a una función de jsx como xyz(id) dentro de <img src = "xyz(id)" /> . En la función de llamada, estoy recuperando el valor de la imagen a través de un mapa como
const xyz = (id) =>{ return abc.map(a => { if(a.id === id){ if(a.url){ return a.url; } } }) }Cuando inspecciono el elemento img, se agregan comas iniciales y finales después de la declaración de devolución como "..returned_url..".
Solo debe devolver la parte de la URL a la persona que llama si hay una coincidencia; debe excluir los resultados vacíos de la devolución de llamada .map , de lo contrario, aparecerán como cadenas vacías entre muchas comas.
const xyz = (id) => { return abc .map(a => { if (a.id === id && a.url) { return a.url; } }) .filter(Boolean); } Pero devolver una matriz cuando intenta establecer un src no tiene mucho sentido. Si solo hay un posible elemento coincidente, usar .find podría ser más apropiado que .map , tal vez
const xyz = (id) => { return abc .find(a => a.id === id) ?.url; }