I fetched some data from an API. Then I mapped it as a div ( each div is a different piece of data ).
The data is dynamic, as it's being constantly updated/changed. I wanted to ask if it's possible to "refresh" the data, but only for the current div and not the other divs.
Example of how the mapped div's would look like in theory:
<>
<div></div>
<div></div>
<div></div> (For example: user clicks to update data for this specific div -> then fetch current/updated data, and only update this div, not ALL other ones.. another option is to update data automatically all the time without having to refresh manually )
<div></div>
</>
function FetchCrypto() {
const [coins, setCoins] = useState([]);
useEffect(() => {
axios
.get(
'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'
)
.then(res => {
setCoins(res.data);
})
.catch(error => console.log(error));
}, []);
// I guess I could write some kind of function here (within the useEffect)
// or write a separate useEffect call to fetch data for "coins.id"
// and then pass a dependency to see if state of coins.id changes ?
// not really sure if that's a viable solution
return (
{coins.map(coin => {
return (
(coin.id ? (
<div>
<img src={coin.image} alt='crypto' />
<h1>{coin.name}</h1>
<p className='stockPrice'>${coin.current_price.toFixed(2)}</p>
{coin.price_change_percentage_24h < 0 ? (
<p className='coin-percent redPercent'>{coin.price_change_percentage_24h.toFixed(2)}%</p>
) : (
<p className='coin-percent greenPercent'>{coin.price_change_percentage_24h.toFixed(2)}%</p>
)}
<button className="deleteBtnCoin" removecoin={coin.id} onClick={removeHandler}>x</button>
<button className="refreshBtnCoin"></button> // I already have prepared a button for it, but I need to figure out if it's possible
</div>
) : (
<div key={coin.id}> </div>)
))
})}
)
Please let me know if it makes sense, I tried to make it simple and to the point - otherwise I will update the question. Thank you in advance!