filter function is doesn't work on Array in React

Question

I get data from the server by using useReducer and do some action on that and showing them on the table for that I use filter() but it gives me an error that my data is Undefined

UseReducer:

function savedEventsReducer(state, { type, payload }) {
  switch (type) {
    case "push":
      return [...state, payload];
    case "update":
      return state.map((evt) =>
        evt.id === payload.id ? payload : evt
      );
    case "delete":
      return state.filter((evt) => evt.id !== payload.id);
    default:
      throw new Error();
  }
}
 const [SavedEvents, dispatchcallEvent] =
    useReducer(savedEventsReducer, [])
  useEffect(() => {
      axios.get('http://localhost:8000/SavedEvents/').then(resp => {
        dispatchcallEvent({ type: 'push', payload: resp.data });
      })
  }, [])

These are the action functions that filter data:

  const [Lables, SetLables] = useState([])

const filteredEvents = useMemo(() => {
    if(SavedEvents[0]){ 
      console.log(SavedEvents[0]); // it's gives me my Data and not Undefine.
      console.log(SavedEvents);
      return SavedEvents[0].filter((evt) => // this is the line that mentioned in Error 
      Lables
        .filter((lbl) => lbl.checked)
        .map((lbl) => lbl.label)
        .includes(evt.label)
    );}
  }, [SavedEvents, Lables])
useEffect(() => {
    SetLables((prevLabels) => {
      if(SavedEvents[0]){
      return [...new Set(SavedEvents[0].map((evt) => evt.label))].map(
        (label) => {
          const currentLabel = prevLabels.find(
            (lbl) => lbl.label === label
          );
          return {
            label,
            checked: currentLabel ? currentLabel.checked : true,
          };
        }
      );
      }
    });
  }, [SavedEvents])

All these codes are in my Context and I use them after the first rendering all of them are rendered

Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filter')
    at ContextWrapper.js:58:1
    at Array.filter (<anonymous>)
    at ContextWrapper.js:58:1
    at updateMemo (react-dom.development.js:15867:1)
    at Object.useMemo (react-dom.development.js:16413:1)
    at useMemo (react.development.js:1532:1)
    at ContextWrapper (ContextWrapper.js:54:1)

this is SavedEvents[0] :

SavedEvents[0] is probably not what you thing in the first render — Konrad
– Konrad, Commented Sep 20, 2022 at 18:05
@KonradLinkowski i put a condition and i log from savedEvents[0] before filter() — Masir
– Masir, Commented Sep 20, 2022 at 18:08
But it's Lables.filter which throws not SavedEvents[0].filter. Also, SavedEvents[0] isn't an array so filter doesn't make any sense — Konrad
– Konrad, Commented Sep 20, 2022 at 18:10
i check that ,you right but i set Lables with useEffect What Can i do For This ? — Masir
– Masir, Commented Sep 20, 2022 at 18:38

Mohsen.RJ · Accepted Answer · 2022-09-20 19:10:34Z

1

you should add another condition on top of your SetLables Like :

useEffect(() => {
    if(SavedEvents[0]){
    SetLables((prevLabels) => {
        // console.log(SavedEvents[0]);
      return [...new Set(SavedEvents[0].map((evt) => evt.label))].map(
        (label) => {
          const currentLabel = prevLabels.find(
            (lbl) => lbl.label === label
          );
          return {
            label,
            checked: currentLabel ? currentLabel.checked : true,
          };
        }
      );
    });
  }
    // console.log(Lables);
  }, [SavedEvents])

answered Sep 20, 2022 at 19:10

Mohsen.RJ

3841 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

filter function is doesn't work on Array in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related