React String 过滤器方法返回带有 .includes() 条件的空数组

Question

When I test example code like this in a sandbox, it works. But when using in my functional component. It does not work.

I am only showing the code necessary to see the example. queryValue state is set when a user types in a search bar and have console.log(typeof queryValue) returns a string and console.log(queryValue) to get what is in a field.

data is an array of objects I am getting from an API. If queryValue === "" , then data shows up ok.

else condition when there is something typed in the field, I filter over the data (array of objects) and set the productData to the result of the filter() method. It should only return an array of objects where the title key (which is also a string) includes(queryValue)

I have also console.log(product.title.includes(queryValue)); This returns true At the end console.log(productData); and I get an empty array if someone types something...but the condition is true .

I read that filter() returns and empty Array if nothing matches the condition. But clearly mine does.

product in filter() is confirmed to be an object

const ExampleComponent = () => {
  const [queryValue, setQueryValue] = useState(null);

  let productData = [];

  if (queryValue === "") {
    productData = data;
  } else {
    productData = data.filter((product) => {
      product.title.includes(queryValue);
    });
  }

  console.log(productData);

  return (
   <h1>Hi</h1>
  )
};

export default ExampleComponent;

Answer 1

Change:

product.title.includes(queryValue);

To return true or false:

return product.title.includes(queryValue);

Or with an implicit return:

productData = data.filter((product) => product.title.includes(queryValue));