0

У меня есть 2 компонента. Мне надо вывести валюты в список. Первый:

const valute = axios.get('https://www.cbr-xml-daily.ru/daily_json.js').then((res) => {
    console.log(Object.keys(res.data.Valute))
})
    
return (
    <div className='flex flex-col'>
        <form action="select1.php" method="post">
            <p>From</p>
            <select>
                <Valuta/>
            </select>

Второй такой:

return (
    <option>
        {valute}
    </option>
)

Как я понял, мне необходимо передать полученный массив во второй компонент и там уже отрисовывать его в option, но не могу понять как это сделать.

1
  • Для начала, вам нужно понять как правильно получить значения из промиса (результата axios.get), дальше осознать, что вам нужен будет стейт, который вы будете обновлять. 5 фев 2023 в 5:04

1 ответ 1

0

Мне надо вывести валюты в список

Предложу такую модель для вывода...

let root = document.querySelector('#root');
root = ReactDOM.createRoot(root);
root.render(<List />)

//
function List() {
  const [obj, setObj] = React.useState({})
  React.useEffect(_ => {
    axios.get('https://www.cbr-xml-daily.ru/daily_json.js')
      .then(res => {
        setObj(res.data.Valute)
      })
      .catch(console.log)
  })
  return (
    <form>
      <p>From</p>
      <select>
        {Object.keys(obj).map(k => <Valuta key={k} data={obj[k]} />)}
      </select>
    </form>
  )
}

//
function Valuta({data}) {
  return (
    <option>
      {data.Name}
    </option>
  )
}
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<div id="root"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.