I am trying to create a search feature using react hooks but it keeps returning the error:

Cannot read Property of Undefined

on the updateSearch function whenever I type in the input field.

  const [search, setSearch] = React.useState('');
  const [searchResults, setSearchResults] = React.useState([]);

  const [state, setState] = React.useState({
    open: false,
    name: '',
    users:[]
  });

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


  const getAllUsers = () => {
    fetch('/userinformation/', { 
      method: 'GET',
      headers: {'Content-Type':'application/json'}
    })
    .then(function(response) {
      return response.json()
    }).then(function(body) {
      console.log(body);
      setState({...state, users: body });
    })
  }

  const updateSearch = (event) => {
   setSearch(event.target.value)
  }

  React.useEffect(() => {
    const results = state.users.filter(user =>
      user.toLowerCase().includes(search)
    );
    setSearchResults(results);
  }, [search]);

return (
<input type="text" value={search} onChange={(e) => updateSearch(e.target.value)}/>
)

Whenever I type in the search bar I get the following error:

How can i fix this?

I am trying to create a search feature using react hooks but it keeps returning the error:

Cannot read Property of Undefined

on the updateSearch function whenever I type in the input field.

  const [search, setSearch] = React.useState('');
  const [searchResults, setSearchResults] = React.useState([]);

  const [state, setState] = React.useState({
    open: false,
    name: '',
    users:[]
  });

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


  const getAllUsers = () => {
    fetch('/userinformation/', { 
      method: 'GET',
      headers: {'Content-Type':'application/json'}
    })
    .then(function(response) {
      return response.json()
    }).then(function(body) {
      console.log(body);
      setState({...state, users: body });
    })
  }

  const updateSearch = (event) => {
   setSearch(event.target.value)
  }

  React.useEffect(() => {
    const results = state.users.filter(user =>
      user.toLowerCase().includes(search)
    );
    setSearchResults(results);
  }, [search]);

return (
<input type="text" value={search} onChange={(e) => updateSearch(e.target.value)}/>
)

Whenever I type in the search bar I get the following error:

How can i fix this?

• javascript
• reactjs
• events
• react-hooks

5 Answers 5

You can either get to the value of passed event by changing

<input type="text" value={search} onChange={(event) => updateSearch(event}/>

or you can keep the input element as it is and change the update updateSearch callback to

const updateSearch = (event) => { setSearch(event) }

Secondly, you are applying includes to a single item of an array which is specific to array methods, you need to make following changes as well to make it work:

React.useEffect(() => { 
 const results = state.users.filter( user => user.firstName.toLowerCase() === search ); 
 setSearchResults(results); 
}, [search])

in your input you're already passing valueonChange={(e) => updateSearch(e.target.value) and in updateSearch you're trying to accessing it. Change it like this, if you want to access event in updateSearch method and get value from it.

<input type="text" value={search} onChange={(e) => updateSearch(e}/>

You have already passed the value of the input into the updateSearch method.

This is how you should fix it:

const updateSearch = (value) => {
   setSearch(value);
};

And as for the second issue you have raised on your useEffect hook, you will have to call toLowerCase() on one of your properties (either firstName or lastName), depending on what you need to search for.

React.useEffect(() => {
  const results = state.users.filter(user =>
    user.firstName.toLowerCase().includes(search)
  );
  setSearchResults(results);
}, [search]);

I would teach you a secret that has worked very well for me over the years. When javascript gives you such error as cannot read property ***whateverValue*** value of undefined it means you are trying to read the property of an object that does not exist. In this case, the object you're trying to read from is undefined, hence it cannot have any key: value pair.

Back to your question: TypeError: Cannot read property value of undefined

1. Using cmd+f to check for all places where value is used shows me everywhere you used value on event.target.value

Stay with me (I know this is boring, but it would help later).

2. You have an event handler named updateSearch.

3. All you need here now is to change your input tag to this:

<input type="text" value={search} onChange={updateSearch}/> Don't worry, React would handle the rest, it automatically parses the event to eventHandler which can then be accessed on such eventHandler.

Also, I think you might want to refactor this ponent.

Something like import React, {useState, useEffect} from React you won't have to call React.useEffect or React.useState in other parts of the project. just useEffect or useState. Goodluck :+1

For me changing from import React from 'react' and using state with React.useState() into import {useState} from 'react' and using it as useState() without the React namespace did the trick