score:0
you can fix this by downloading all the currencies images that you will use, and after that create an object which bind key: symbol; value: 'path-to-image'
please refer to this on how to display icon inside input
and refer to this on how to include images in react
as far as i am looking at this, concrete solution might be like this
// * download all currency flags that you will use and add them to public directory
const mapsymboltoflag = {
'all': 'path-to-public-directory/all.ico',
'eur': 'path-to-public-directory/eur.ico'
}
// * so on and so forth
create an input component to hide all the details on how to put image/icon on input and the mapping, and include this input component that you will create on the main currency component with symbol as input/prop
score:0
i have a few points i want to highlight:
- a way to solve this is creating a dictionary where you can define a flag using the currency.
- creating a component where you send the currency can be a good practice to implement the dictionary
- there are currencies where many countries use them, so in this case you need to define a flag or adapt your component to show the flags where the currency applies.
- in your example you are overriding the state and deleting the information of your initial state, you need to add setstate({...state, }) and after that, new things.
here are my code snippets where you need to modify:
...
handlechange (event) {
const target = event.target;
const value = target.value;
const name = target.name;
// add `...state` to avoid remove all your previous information
setstate({ ...state, [name]: value });
};
...
...
handlesubmit(event) {
event.preventdefault(); //preventing form from submitting
fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=my-token`)
.then(res => res.json())
.then(data => {
const ratefromeurotoinput = data.rates[state.currencyinput]
const inputineuros = state.amountinput / ratefromeurotoinput
const ratefromeurotooutput = data.rates[state.currencyoutput]
const eurosinoutput = inputineuros * ratefromeurotooutput
// add ...state to avoid remove all your previous information
setstate({ ...state, amountoutput: eurosinoutput })
})
};
...
...
render() {
<>
<div classname="card card-body p-3 mb-3 bg-light text-dark">
<h1 classname="mb-4">currency converter</h1>
<form onsubmit={handlesubmit}>
<div classname="d-flex">
<div classname="form-row col-md-6 col-sm-6 offset-1">
<div classname="form-group col-md-8">
<div classname="mb-2">
<label>
<strong>currency i have</strong>
</label>
</div>
<select
classname="form-select"
type="text"
name="currencyinput"
value={state.currencyinput}
onchange={handlechange}
>
{state.options.map((option) => {
return <option value={option}>{option}</option>;
})}
</select>
{/* here goes your new component */}
<flags currency={state.currencyinput} />
</div>
...
}
i found an image api where you can define a flag using its country code country flags
using that i made this component
import react from 'react';
import flagsdata from '../../mocks/flags.json';
const flag_url = 'https://www.countryflags.io';
const { flagsfromcurrency, styles, sizes } = flagsdata;
const flags = ({ currency, style = styles.flat, size = sizes['16'] }) => {
return (
<img
src={`${flag_url}/${flagsfromcurrency[currency]}/${style}/${size}.png`}
alt={flagsfromcurrency[currency]}
/>
);
};
export default flags;
this is the result:
and you can take a look at the code i made here
i hope this works for you.
update: i implemented bootstrap styles.
Source: stackoverflow.com
Related Query
- How to fetch currency flags from API?
- How to fetch API data from Axios inside the getServerSideProps function in NextJS?
- How to fetch data from api and pass it as props
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to fetch and display data from Express API to a React app?
- How to use useEffect() to fetch data from an api in a useReducer() and useContext() state management setup?
- how to set an useEffect to fetch data from API at first render with eslint-react-hooks?
- How to fetch data from API using id in reactJS?
- How to fetch data in ReactJS from NodeJS API for Influxdb?
- How do I fetch data from API before render method called? (react, passport, express)
- How to assign response from Api to an array using fetch function
- How to get React to re fetch my data from API after a POST or DELETE to Database?
- With React useState how do you access key values of an array returned from fetch API
- How to fetch api from the function which pushes each api in array?
- How do I fetch search results from multiple API using reactjs
- How to fetch json data from a url that requires an api key to access the data in reactjs?
- How can I fetch base64 encoded images (string) from a URL/ API and display in ImageField or on react-admin list or show page
- How to fetch data from api in react?
- how to reverse fetch images from nasa APOD api in react
- How to fetch data from API and then pass it to another component in react after it is fully loaded?
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- How to fetch a data from an API in MERN stack web application project?
- React App: How to display data from api using fetch
- How to fetch data from Nextjs API route when build and deploy?
- How to grab ASP.NET Web Api token (login) from a JS fetch and save token
- how fetch data from database through api using axios in reactjs?
- How to fetch the API details from a component folder using Next.js?
- How to fetch data from api in React by using axois?
- How to get specific fields from an api fetch using redux saga
- How to fetch from API using useReducer and useEffect while still allowing requery
More Query from same tag
- How to align AntDesign Timeline to the left
- Issues with CSRF on login form with React SPA and Django
- Reactjs - fill array elements in dropdown list using javascript
- Unable to push the URL with ID in react.js, React Hook useEffect has a missing dependency inside the array
- Why is it not recommended to switch a React component from controlled to uncontrolled?
- Mongoose : Cast to ObjectId failed for value "Some String" at path "_id"
- persist state after page refresh in React using local storage
- Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]
- onClick not firing when clicking on component
- Material UI List onClick fires click event on nested list
- How to create test on a non inline style CSS in a jest
- How to fire onSelectStart in React/JSX?
- I can't access the object what I want from Poke API
- show props value in url in next js
- How to solve TypeScript typing issue with component composition
- Generate HighChart Colors Before Drawing Chart?
- React/Redux store updating but Component not re-rendering
- Validating Data in Redux Store
- Using React hooks conditionally in Next JS
- Change Default Path of .env files in ReactJs ViteJs Project
- Using draft js with html in and html out
- Map through two arrays of components and strings and render in one component
- How to get the values from <select multpile={true}> in ReactJs
- I want to put my two states input data into a table in react
- How to set up a chrome extension using React and TypeScript with multiple pages and entry points?
- Using setInterval() to make a session timer with ReactJS hooks: error messages, irregular counting and "null" output
- why changing state does not trigger if it's related to props
- Why isn't my React context being updated?
- Remove item from array with click function
- <input type="number"> scroll behaviour differ with React