How to interpolate an image src in React? - reactjs

Question

I am trying to display a photo from an object I received from an API. I was able to get down to the data information, but the image is not displaying in the displayPhoto function. I was wondering what was wrong with this?
import React, { useState, useEffect } from "react";
import axios from "axios";
// fetch api
// display data
// display more data
export default function App() {
const [data, setData] = useState([]);
const fetchAPI = () => {
axios.get('https://randomuser.me/api')
.then(res => {
// handle success
console.log(res["data"]["results"]);
const indData = (res["data"]["results"]);
const updatedData = [
...data,
...indData
]
setData(updatedData);
// console.log(data)
})
.catch(error => {
// handle error
console.log(error);
})
}
const mapData = (info) => {
const first = (info["name"]["first"])
const last = (info["name"]["last"])
return `${first} ${last}`;
}
const displayPhoto = (info) => {
const picture = (info["picture"]["large"]);
return <img src={picture} />;
}
return (
<>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={fetchAPI} >Fetch API </button>
{data.map((e, idx) => (
<p>{mapData(e, idx)}</p>
{displayPhoto(e)}
))}
</div>
</>
);
}

Answer 1

It looks like you put the wrong src to img tag in displayPhoto function. You should check the path and then render img component with it.
{data.map((e, idx) => (
<div>
<p>{mapData(data, idx)}</p>
<img src={data.rightSrcl} />
</div>
))}