CODEWITHSUNDEEP
arraysreactjs
Hexycode
Hexycode

Reputation: 458

How to hide list in ReactJS before query

I would like to hide a list of symbols before I start looking into them with search engine.

Here is how it looks when I click on dropdown.

enter image description here

As you can see when I click I immediately see the whole list.

How I can hide it up and just start showing when I enter query?

For example if I write in Symbol field AD it should show me only ADABTC and if I write ET it should show me ETHBTC and ETCBTC and etc.

CODE HERE

import React from "react";
import { Button } from "react-bootstrap";

const symbols = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

function PriceTriggerField() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };
 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
        <h6>Price Alert History</h6>
      <input
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChange}
      />
       <input
        type="number"
        placeholder="Price"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
         {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
      <Button variant="secondary">Set</Button>
    </div>
  );
}

export default PriceTriggerField;

EDIT1 After adding @Kalhan.Toress answer I receive a strange 0 when I just clicked a dropdown

enter image description here

Upvotes: 1

Views: 49

Answers (4)

GameAintTheSame
GameAintTheSame

Reputation: 44

<ul>
     {searchTerm.trim().length > 0 && searchResults.map(item => (
      <li>{item}</li>
    ))}
  </ul>

The trim stops whitespace being an issue

Upvotes: 0

Alberto Perez
Alberto Perez

Reputation: 2922

I've made a StackBlitz using a simple solution base on the filter method for Arrays, but you can also see the code right directly here:

import React from "react";
import { Button } from "react-bootstrap";

const symbols = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

function PriceTriggerField() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);

    setSearchResults(symbols.filter(sym => sym.includes(event.target.value)));
  };

 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
        <h6>Price Alert History</h6>
      <input
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChange}
      />
       <input
        type="number"
        placeholder="Price"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
         {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
      <Button variant="secondary">Set</Button>
    </div>
  );
}

export default PriceTriggerField;

Hope you find it useful.

Upvotes: 0

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

I think you can add few changes and get what you want

If there's a search query, then show the data else don't

<ul>
    {
        searchTerm.length > 0 && searchResults.map(item => <li>{item}</li>)
    }
</ul>

Here is a demo

Upvotes: 1

k-wasilewski
k-wasilewski

Reputation: 4633

Initialize your searchTerm with something these symbols don't contain, eg.

const [searchTerm, setSearchTerm] = React.useState(" "); //(a whitespace)

Upvotes: 0

Related Questions