Вывод в компонент React

Question

У меня есть 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, но не могу понять как это сделать.

Answer 1

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

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

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>

БЛОГ НА HUSL

Вывод в компонент React

Ответы (1 шт):