React

by Hayk Aghabekyan

HTML

<div id="app"></div>

React

const response = {
	listOfCoins: ['btc', 'xrp', 'eth'],
  pairs: [{a: 'btc', b: 'eth'}, {a: 'eth', b: 'btc'}, {a: 'xrp', b: 'eth'}]
};


const pairs = [
    {
        "id": 1,
        "uid": "b18c150e-641e-4b26-9f18-88eca2baee61",
        "created": "2022-01-17T12:42:56.4069Z",
        "updated": "2022-01-17T12:42:56.4069Z",
        "currency_a": "btc",
	      "currency_b": "eth",
        "enabled": true,
        "min_amount": 0.12
    },
        {
        "id": 1,
        "uid": "b18c150e-641e-4b26-9f18-88eca2baee61",
        "created": "2022-01-17T12:42:56.4069Z",
        "updated": "2022-01-17T12:42:56.4069Z",
        "currency_a": "eth",
	      "currency_b": "btc",
        "enabled": true,
        "min_amount": 0.12
    },
    {
        "id": 2,
        "uid": "af21eba2-f304-4a39-9cdd-b45f8af44724",
        "created": "2022-01-17T12:42:56.4069Z",
        "updated": "2022-01-17T12:42:56.4069Z",
        "currency_a": "btc",
	      "currency_b": "link",
        "enabled": true,
        "min_amount": 0.13
    },
    {
        "id": 3,
        "uid": "bcfaff12-8058-4f1a-b7a5-ccfbfd348ab5",
        "created": "2022-01-17T12:42:56.4069Z",
        "updated": "2022-01-17T12:42:56.4069Z",
        "currency_a": "btc",
	      "currency_b": "xrp",
        "enabled": true,
        "min_amount": 0.14
    },
        {
        "id": 4,
        "uid": "b18c150e-641e-4b26-9f18-88eca2baee61",
        "created": "2022-01-17T12:42:56.4069Z",
        "updated": "2022-01-17T12:42:56.4069Z",
        "currency_a": "xrp",
	      "currency_b": "eth",
        "enabled": true,
        "min_amount": 0.12
    },
];

const TodoApp = () => {
	const [a, setA] = React.useState(undefined);
  const [b, setB] = React.useState(undefined);
  
	return (
	  <div>
	    <select onChange={(e) => setA(e.target.value)}>
	      <option value="">Select A</option>
        {
          pairs.map((pair, i) => {
            return (
              <option key={`a${pair.uid}`}...