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

Trying to start a page with all necessary information React JS – Javascript

js. Im trying to find a way to pass as a Prop the value that I get in the fetch. I try this now, buy all page is blank.

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

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

export default App;

Before that, I was trying this:

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

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

  let url = 'https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=8EqP0C6iM0eDi5UbAqdLwnLnFIUflB920Izw7jtO';
  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;

but also doesnt work.

please help

Tags:

2

Answers


  1. 0

    Image[1]: https://i.stack.imgur.com/Ug4lv.jpg

    //App Page

import "./styles.css";

import React, { useState, useEffect } from "react";
import RealDolar from "./components/RealDolar";

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

  let url =
    "https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=xyz";

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch(url)
      .then((res) => {
        // console.log(res.json());
        return res.json();
      })
      .then((json) => {
        setRealDolar(json["data"]["BRL"]);
      });
    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  console.log(realDolar);

  return (
    <div className="Real_Rapido">
      hello
      <RealDolar cotacao={realDolar} />
    </div>
  );
}

export default App;


//component Page
import React, { useState } from "react";
// import RealDolar from './components/real_dolar.js';

function RealDolar({ cotacao }) {
  // const [realDolar, setRealDolar] = useState(0);
  console.log("realDollar", cotacao);

  return (
    <div className="Real_Rapido">
      <div>Real Dolar</div>
      <div>{cotacao}</div>
    </div>
  );
}

export default RealDolar;
    Login or Signup to reply.
  2. 0

    You can see this working here

    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
  // ... 
}

    EDIT: wrong example url

    EDIT2: added export default

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search