Obtuve algunos datos de una API. Luego lo asigné como un div (cada div es un dato diferente).

Los datos son dinámicos, ya que se actualizan/cambian constantemente. Quería preguntar si es posible "actualizar" los datos, pero solo para el div actual y no para los otros divs.

Ejemplo de cómo se verían los div mapeados en teoría:

 <> <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>) )) })} )

Avíseme si tiene sentido, traté de hacerlo simple y directo; de lo contrario, actualizaré la pregunta. ¡Gracias de antemano!