react js myfn is not a function when called from a button-CodePudding

I've just started learning about react js and this is my first react js app. I'm using api to fetch the data. so far it works, but now I want to add a search keyword to the function that is acquired from a search bar component.

here's my code:

SearchBar.js

const SearchBar = ({ getUsers }) => {
  return (
    <div className="is-flex flex-align-items-center mb-3">
      <input type="text" id="query" className="input search-input" placeholder="search keyword"/>
      <Button className="search-btn ps-3 pe-3" 
      onClick={() => getUsers(document.querySelector('#query').value)}>
        <FontAwesomeIcon icon={faMagnifyingGlass} />
      </Button>
    </div>
  );
};

MasterUser.js

import { useState, useEffect } from "react";
import SearchBar from "./SearchBar";

const MasterUser = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    getUsers();
  }, []);

  const getUsers = async (query='') => {
    console.log('get users', query);
    try {
      let myurl = 'http://localhost:8080/users';
      const response = await fetch(myurl);
      const data = await response.json();
      setUsers(data);
      setIsLoading(false);
    } catch (e) {
      console.log(e.getMessage());
    }
  };

  return (
    <div>
      <SearchBar onClick={getUsers}/>
    </div>
  );
};

when the app loads, the console log says get users <empty string> and it returns all the users as expected, but when I clicked on the search button (magnifyingGlass) it gives an error Uncaught TypeError: getUsers is not a function.

any help is appreciated..

CodePudding user response：

Make your searchBar component more reactive like so

const SearchBar = ({ getUsers }) => {
const [searchValue,setSearchValue]=useState('');
  return (
    <div className="is-flex flex-align-items-center mb-3">
      <input type="text" id="query" className="input search-input" placeholder="search keyword" value={searchValue} onChange={(e)=>setSearchValue(e.target.value)}/>
      <Button className="search-btn ps-3 pe-3" 
      onClick={() => getUsers(searchValue)}>
        <FontAwesomeIcon icon={faMagnifyingGlass} />
      </Button>
    </div>
  );
};

CodePudding user response：

  <SearchBar onClick={getUsers}/>

You have named the prop onClick not getUsers. That's why you get that error.

Yeah, accessing dom element value using selectors (e.g. document.querySelector('#query').value) is also not typical react. Read about controlled form elements (save form element value in state).