Question 52450 in Javascript Question posted in
A very good W3school tutorial can be found here.

React JS – Value is not passing to the element from App.js – Javascript

im starting to study React JS, so Im trying to build an app that makes cotation and Im trying to pass the cotation value as a prop.

But it doesn work. Please help!

Thanks!!

import './App.css';
import RealDolar from './components/real_dolar.js';

function App() {
  let realDolar = 0;
  let url = 'https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=xyz';
  fetch(url).then(res=>{
    return res.json()
  }).then(json=>{
    realDolar = json['data']['BRL'];
  })
  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar} />
    </div>
  );
}
export default App;
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    worked with this..

    import React, {useState, useEffect} from 'react';
import RealDolar from './components/real_dolar.js';
import './App.css';

function App(props) {
   const [realDolar, setRealDolar] = useState()

  const fetchDolar = async () => {
    const url = "https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=xyz"
    const res = await fetch(url)
    const {data} = await res.json()
    const {BRL} = data

    setRealDolar({ BRL })
  }

  useEffect(() => {
    fetchDolar()
  }, [])

  if (realDolar == null) return <div>Loading</div>

  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar['BRL']}/>
      <Informacoes />
    </div>
  )
}

export default App

// RealDolar  Component
function RealDolar({cotacao}) {
  // use cotacao here
  // ... 
}

  2. 0

    Hi! You need to use useState and useEffect hooks.

    Learn more about hooks: https://react.dev/reference/react/useState and https://react.dev/reference/react/useEffect

    import './App.css';
import RealDolar from './components/real_dolar.js';
    
function App() {
  const [realDolar, setRealDolar] = useState(0);
  const url = 'https://api.freecurrencyapi.com/v1/latest? 
  base_currency=USD&currencies=BRL&apikey=xyz';

  useEffect(() => {
    fetch(url).then(res=>{
      return res.json()
    }).then(json=>{
      setRealDolar(json['data']['BRL']);
    })
  }, [])
     
  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar} />
      </div>
  );
}

export default App;
    Login or Signup to reply.
  3. 0

    The passed prop should be a state:

    function App() {
  const [realDolar, setRealDolar] = useState(0);
  useEffect(() => {
    let url = 'https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=xyz';
    fetch(url).then(res=>{
      return res.json()
    }).then(json=>{
      setRealDolar(json['data']['BRL'])
    })
  }, [])
  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar} />
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search