• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React Dropdown zamiana elementów

0 głosów
22 wizyt
pytanie zadane 3 dni temu w JavaScript przez vishi7 Początkujący (370 p.)
edycja 3 dni temu przez vishi7

Hej,

Chciałabym zrobić kalkulator walut ale mam problem z listą walut, a konkretnie nie mogę znaleźć sposobu aby zastąpić jeden element drugim, czyli np. z początkowego PLN na np. Euro.

Dopiero się uczę Reacta, dlatego proszę o wskazówki ;)

Podgląd strony: https://c-rates.netlify.app

Kod komponentu:

import React from 'react';
import CurrencyIcon from 'components/atoms/CurrencyIcon/CurrencyIcon';
import { useParams } from 'react-router-dom';
import { ReactComponent as Vector } from 'assets/vector.svg';
import { countries } from 'data/countries';
import { useState } from 'react';
import {
  Wrapper,
  Input,
  Filter,
  Code,
  Dropdown,
  ListItem,
  Flag,
  Image,
  Button,
} from './Calculator.styles';

const Calculator = () => {
  const { id } = useParams();
  const [isShown, setIsShown] = useState(false);
  const [selected, setSelected] = useState('');

  return (
    <Wrapper>
      <Input />
      <Filter onClick={(e) => setIsShown(!isShown)}>
        <CurrencyIcon isPLN={true} />
        <Code>pln</Code>
        <Vector />
        {isShown && (
          <Dropdown>
            {countries.map((countryData) => (
              <ListItem
                onClick={(e) => {
                  setSelected(countryData);
                  setIsShown(false);
                }}
              >
                <Flag>
                  <Image src={countryData.flag} alt="" />
                </Flag>
                <Code>{countryData.code}</Code>
              </ListItem>
            ))}
          </Dropdown>
        )}
      </Filter>
      <Input />
      <Filter>
        <CurrencyIcon />
        <Code>{id}</Code>
        <Vector />
        {isShown && (
          <Dropdown>
            {countries.map((countryData) => (
              <ListItem>
                <Flag>
                  <Image src={countryData.flag} alt="" />
                </Flag>
                <Code>{countryData.code}</Code>
              </ListItem>
            ))}
          </Dropdown>
        )}
      </Filter>
      <Button>Sprawdź kurs</Button>
    </Wrapper>
  );
};
export default Calculator;

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 147 wizyt
pytanie zadane 2 maja 2021 w JavaScript przez Bakkit Dyskutant (7,570 p.)
0 głosów
1 odpowiedź 60 wizyt
0 głosów
2 odpowiedzi 163 wizyt

88,663 zapytań

137,273 odpowiedzi

306,605 komentarzy

58,864 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...