i am trying to do a search in react js and its working the only problem is i am not able to get one more value in to my serch result (id)

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { useState, useEffect } from "react";
import axios from "axios";

const initialState = {
  idaddProducts: "",
};
const Searchclients = () => {
  const [showResults, setShowResults] = React.useState(true);

  const [poName, pnName] = React.useState(initialState);
  const [showSerch, setShowSerch] = React.useState([]);

  const [inputValue, setInputValue] = React.useState("");
  const [filteredSuggestions, setFilteredSuggestions] = React.useState([]);
  const [selectedSuggestion, setSelectedSuggestion] = React.useState(0);
  const [displaySuggestions, setDisplaySuggestions] = React.useState(false);
  //const [suggestions, setSuggestions] = useState([]);

  const suggestions = [];
  showSerch.forEach(function (data) {
   
    var data = data.firstname;     ///////  i pass the name from here  i also want to pass id  it will look something like this  var data = data.id
    
    suggestions.push(data);
  });
 

  const onChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
    setShowResults(false);

    const filteredSuggestions = suggestions.filter((suggestion) =>
      suggestion.toString().toLowerCase().includes(value.toLowerCase())
    );

    setFilteredSuggestions(filteredSuggestions);
    setDisplaySuggestions(true);
  };

  const onSelectSuggestion = (index) => {
    setSelectedSuggestion(index);
    setInputValue(filteredSuggestions[index]);
    setFilteredSuggestions([]);
    setDisplaySuggestions(false);
  };

  const SuggestionsList = (props) => {
  
    function finddoctor(e) {}

    const {
      suggestions,
      inputValue,

      onSelectSuggestion,
      displaySuggestions,
      selectedSuggestion,
    } = props;

    if (inputValue && displaySuggestions) {
      if (suggestions.length > 0) {
        return (
          <ul className="suggestions-list" style={styles.ulstyle}>
            {suggestions.map((suggestion, index) => {
             
              const isSelected = selectedSuggestion === index;
              const classname = `suggestion ${isSelected ? "selected" : ""}`;
              return (
                <li
                  style={styles.listyle}
                 
                  key={index}
                  className={classname}
                  onClick={finddoctor(index)}
                >
                  {suggestion}   {id } // i want the id passed here 
                </li>
              );
            })}
          </ul>
        );
      } else {
        return <div>No suggestions available...</div>;
      }
    }
    return <></>;
  };

 

  useEffect(() => {
    axios
      .get("my-url")
      .then((res) => {
        const data = res.data;
      setShowSerch(data);
   });
    
  }, []);

  return (
    <div className="note-container" style={styles.card}>
      <div style={styles.inner}>
        <p style={{ textAlign: "left" }}>Search Doctors</p>
        <form className="search-form" style={{}}>
          {showResults ? (
            <FontAwesomeIcon style={{ marginRight: "-23px" }} icon={faSearch} />
          ) : null}
          <input
            onChange={onChange}
            value={inputValue}
            style={styles.input}
            type="Search"
          />

          <SuggestionsList
            //  onClick={() => onSelectSuggestion()}
            inputValue={inputValue}
            selectedSuggestion={selectedSuggestion}
            onSelectSuggestion={onSelectSuggestion}
            displaySuggestions={displaySuggestions}
            suggestions={filteredSuggestions}
          />
        </form>
      </div>
    </div>
  );
};

i am trying to get name and id based on searching my with name but i am able to pass only the name throgh filter

the code works and i am able to get all names based on the search but i also want the id there

CodePudding user response：

I think you can do this:

• Use the entire object in the suggestion, like this:

  showSerch.forEach(function (data) { suggestions.push(data); });

Note: I believe this forEach could be unnecessary.

• In the filter method you can compare the value with name or id, like this:

  const filteredSuggestions = suggestions.filter((suggestion) => suggestion.name.toString().toLowerCase().includes(value.toLowerCase()) || suggestion.id.toString().toLowerCase().includes(value.toLowerCase()));

• In the li tag:

  {suggestion.name} {suggestion.id} // i want the id passed here

I'm assuming the suggestion have an id attribute, if not, use the correct one.