score:1
Accepted answer
try it. i fixed what you asked
import react, { usestate, useeffect } from "react";
const assets = [
"adabtc",
"aionbtc",
"algobtc",
"ardrbtc",
"kavabtc",
"ethbtc",
"etcbtc"
];
export default function app() {
const [queries, setqueries] = usestate([]);
const [symbol, setsymbol] = usestate("");
const [price, setprice] = usestate("");
const [dropdown, setdropdown] = usestate([]);
const onchangesymbol = e => {
setsymbol(e.target.value);
};
const onchangeprice = e => {
setprice(e.target.value);
};
var today = new date();
var date =
today.getfullyear() + "-" + (today.getmonth() + 1) + "-" + today.getdate();
var time =
today.gethours() + ":" + today.getminutes() + ":" + today.getseconds();
var datetime = date + " " + time;
const onclick = () => {
if (symbol !== "" && price !== "") {
setqueries(queries => {
return [
...queries,
`${symbol}` + " " + `price:${price}` + " " + "date:" + datetime
];
});
setsymbol("");
setprice("");
}
};
useeffect(() => {
if (symbol !== "" && symbol !== assets.find(rec => rec === symbol)) {
setdropdown(assets.filter(rec => rec.indexof(symbol) > -1));
} else {
setdropdown([]);
}
}, [symbol]);
return (
<div id="dropdownarea" classname="dropdownfield">
<div id="pricealerthistory">
<h6>price alert history</h6>
</div>
<ul>
{queries.map(query => (
<li>{query}</li>
))}
</ul>
<input
type="text"
placeholder="symbol"
value={symbol}
onchange={onchangesymbol}
/>
<input
type="number"
placeholder="price"
value={price}
onchange={onchangeprice}
/>
<button type="submit" onclick={onclick}>
set
</button>
<ul>
{dropdown.length !== 0
? dropdown.map(asset => {
return (
<li
onclick={() => {
setsymbol(asset);
setdropdown([]);
}}
>
{asset}
</li>
);
})
: false}
</ul>
</div>
);
}
if you want to hide dropdown excactly when you pressed "set".
you can add in your function onclick one string
setdropdown([])
Source: stackoverflow.com
Related Query
- Searching engine from array of words in React
- Return a word from a words array when the time is the one from the time array. Javascript - React
- Rendering React Components from Array of Objects
- Render Content Dynamically from an array map function in React Native
- React JS: how to properly remove an item from this.state.data where data is an array of objects
- Get first object from array of objects in react
- Returning array of functions from custom react hook?
- How to delete object from array using object property - React
- Populate react select options array with key value pairs from firebase collection
- How do I create a react list component from an array of objects?
- Remove item from array in React
- React native delete multiple items from state array
- Render React components from array
- Fetching array of array in react js from JSON response
- React treeview from JSON array
- React / Javascript for loop - Start from idx 0 when exceeding array length
- Unexpected behavour when removing an item from an array in React
- How to pass an Array from Child component to Parent component in react I know how to pass from parent t
- React button mapped from an array value undefined
- How can I show certain elements from an array based on a React State?
- How to remove an element from an array that is inside an object in React JS (ES6)
- How do I create an array of unique field values in React with data from Firestore?
- React onClick pass object ID from a JSON array
- get all values from array of objects in react typescript
- Remove element of an object from array of objects - react state
- React js loop through array received from blade
- Export a dynamic array from a React component to another component
- Accessing individual array elements in React called from API
- React - filtering items from an array in any order
- How to map an array of strings from react state to a select box
More Query from same tag
- How do export a React component with related "child" components
- How to add fade effect in react-table?
- having an issue creating new react app with create-react-app
- React app is not running in the browser. How to resolve this?
- How to change the background color of MUI Menu Popover of TextField with select property?
- how do i get the link from my uploaded file to firebase to pass to img element?
- srcset not working on img
- How to remove suffix slash "/" from the assets url in webpack | Gatsby
- React: can i use [array].map on inside of called function?
- page needs refresh when click on a route
- I want to combine the values of objects in different arrays by sorting them one side
- Trying to change a state in React Hooks with Interval
- How to define placeholders/slots in grand parent and inject component from child?
- Reset React-Select (Unform) after submit
- Animation will not run even after adding animation class to the element via addEventListener in React
- CSS ReactJs - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
- Expo QR code not showing for a React Native App
- React how to not reinitalize mapbox gl js on page change
- Material Ui Drawer Broken on Build
- How do i fix the text/data overflow in material-ui?
- javascript - calculate success rate for every 10 objects in an array
- Get event object in react forms after onChange is called
- How to fix a memory leak in class components?
- Database insert data, real-time render to frontend
- How to implement a server side pagination with Material ui and react?
- How do I remove this prop type warning with nextjs?
- using dispatch in components
- Add a default domain to the email being registered
- How to make an image fill a flex item with flex-grow?
- How to setState to new data in react?