I'm getting this error in React Hooks. The function exists but every time I type something in to the search bar I get this TypeError.

TypeError : setSearchField is not a function

Here's the code for reference :

export default function StudentAPI() {
    const [searchField, setSearchField] = ('');
    const [students, setStudents] = useState([]);

    const getStudents = async () => {
        return axios
        .get("https://api.hatchways.io/assessment/students")
        .then((res) => {
            setStudents(res.data.students);
        })
        .catch((err) => console.log(err));
    };
    
    useEffect(() => {
        getStudents();
    }, []);

    const handleChange = (e) => {
        setSearchField(e.target.value);
    }
    const filteredStudents = students.filter((student) => {
        console.log(student.firstName);
        // return student.firstName.toLowerCase().includes(search.toLowerCase()) ||
        // student.lastName.toLowerCase().includes(search.toLowerCase());
    })
    return (
        <div className="container">
            <SearchBox 
                placeholder={'Search by name'}
                handleChange={handleChange}
                value={searchField}
            />
            {filteredStudents.length > 0 ? filteredStudents.map((student) => {
                return <Student key={student.id} student={student}/>;
            }) : students.map((student) => {
                return <Student key={student.id} student={student}/>;
            })}
        </div>
    );
    
};

CodePudding user response：

You have to use the hook useState

 const [searchField, setSearchField] = usestate('');

CodePudding user response：

You must have the state declaration above const [searchField,setSearchField]=useState()

CodePudding user response：

You have an error because useState is not written!

You must change

const [searchField, setSearchField] = ('');

to

const [searchField, setSearchField] = useState('');