I am trying to create a filter Box where the user can filter videos depending on the Language (Hindi, English, Tamil, Malayalam, Arabic and Tagalog). I keep getting this error: Line 42:29: Expected an assignment or function call and instead saw an expression no-unused-expressions. I am trying to understand the error and why does it show. I am getting the error start from the last useEffect that I created until the return statement. Can someone explain the error to me?

Here is my code:

import { useEffect, useState } from "react";
import "./App.css";
import RadioList from "./components/RadioList";

function App() {
  const [data, setData] = useState([]);
  const [filterData, setFilterData] = useState([]);
  const [language, setLangauge] =  useState("");

  useEffect(() => {
    const getData = () => {
      fetch("radio.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      })
        .then(function (response) {
          console.log(response);
          return response.json();
        })
        .then(function (myJson) {
          console.log(myJson);
          setData(myJson);
        });
    };
    getData();

  }, 
  
  []);
  useEffect(() => {
    setFilterData(data) 



  },
  [data]);

  useEffect(() => {
    setFilterData(
      data.filter(value => {value.language === language})
    )
  },
  [language]);


  return (
    <div className="mt-5 flex flex-col items-center">
       <select
              value="Choose a Language"
        >
      {filterData.map((radioItem) => {
        <option language={radioItem.language}>
      </option>
      })}
       </select>
      {data.map((radioItem) => {
        return (
          <RadioList
            server_url={radioItem.server_url}
            title={radioItem.name}
            language={radioItem.language}
          />
        );
      })}
      
     
    </div>
  );
}

export default App;

CodePudding user response：

Array.prototype.map() & Array.prototype.filter() expects a return statement, refactoring to below should resolve the issue

{
  filterData.map((radioItem) => {
     return(
          <option> </option>
        )      
   })
}

or simply :

filterData.map(radioItem => (<option>{}</option>)) 

CodePudding user response：

Insert a return statement as follows in your filter inside the useEffect.

useEffect(() => {
  setFilterData(
    data.filter((value) => {
      return value.language === language;
    })
  );
}, [language]);

And you've to do the change given by @J.Parashar as well.