Пытаемся запустить страницу со всей необходимой информацией React JS

js. Я пытаюсь найти способ передать в качестве Prop значение, которое я получаю при выборке. Я пробую это сейчас, покупаю, вся страница пуста.

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;

До этого пробовал так:

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;

но тоже не работает.

пожалуйста помоги

javascript reactjs react-native

01.04.2023 16:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Изображение[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.info(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.info(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.info("realDollar", cotacao);

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

export default RealDolar;

01.04.2023 17:27

Ответ принят как подходящий

Вы можете увидеть, как это работает здесь

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

Обновлено: неправильный пример URL

EDIT2: добавлен экспорт по умолчанию

01.04.2023 17:27