Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

253
Visualizações
Refresh only CERTAIN mapped data from API - not all

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!

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda