javascript - How to navigate from API fetched search results in React

Question

I'm trying to Navigate to another page in react using API fetched value as prop in react-router, I have wrapped the search results in Link tag and passed key as prop. But the function doesnt seem to work. It throws the error 'TypeError: event.target is undefined' . However if i reload the page the navigation is sucessfull and i'm at the page i want to be. Below is my code:

const SearchList = ({label}) => {
  const [value, setValue] = useState("");
  const [data, setData] = useState([]);

  const inputRef = useRef(null);

  const debounceLoadData = useCallback(
    _.debounce((value) => {
      getData(value);
    }, 500),
    [] 
  );

  const getData = (name) => {
    axios.get("http://localhost:8000/SearchPost/?search="+name)
         .then(res => setData(res.data))
  };

  const handleSearchFieldChange = (event) => {
    const { value } = event.target;

    setValue(value);
    debounceLoadData(value);
  };
  // const handleSubmit = (name) => {
  //   return ( <StocksDetail prop={name} />)
  // }
  return (
    <div>
     <Downshift onChange={handleSearchFieldChange} itemToString={item => (item ? item.co_N : '')}>
       {({ selectedItem, getInputProps, getItemProps, highlightedIndex, isOpen, inputValue, getLabelProps }) => (
        <div>
          {/* <label style={{ marginTop: '1rem', display: 'block' }} {...getLabelProps()}></label> <br /> */}
          <Form>
          <Form.Control {...getInputProps({
            placeholder: "Search",
            onChange: handleSearchFieldChange
          })} />
          </Form>
          {isOpen ? (
            <div className="downshift-dropdown">
              {
                data
                  .map((item, index) => (
                    <div
                      className="dropdown-item"
                      {...getItemProps({ key: index, index, item })}
                      style={{
                        backgroundColor: highlightedIndex === index ? 'lightgray' : 'white',
                        fontWeight: selectedItem === item ? 'bold' : 'normal',
                      }}>
                        {/* <li onClick={handleSubmit(item.co_N)}>{item.co_N}</li> */}
                      <Link to={{ pathname: '/StockD', state: { sym: item.co_S} }} ><li>{item.co_N}</li></Link>
                    </div>
                  ))
              }
            </div>
          ) : null}
        </div>
      )}
    </Downshift>
    </div>
  );
};
export default SearchList;

question from:https://stackoverflow.com/questions/66065275/how-to-navigate-from-api-fetched-search-results-in-react

Answer 1

You should use event.target.value instead.

The target event property returns the element that triggered the event whereas you want to be operating on the event property here, in this case its value.