TypeError: Cannot read property 'includes' of undefined (React Fetching From Database)

Question

I have issues with this function that it worked well with dummydatabase.js file that I created but when I fetched from the database, it just stopped working...

I thought it was not fetching properly, but it's working fine. I don't understand why it's not working...

Please help and thank you in advance!

Edit: This is the Error that I get. I'm sorry if my question was not clear! ^^;

Edit2: Here's the code for the entire page.

import React, { useState, useEffect } from 'react';
import SearchBox from '../components/SearchBox';
//import Group from '../components/Group';
import GroupList from '../components/Group/GroupList';
//import './App.css';
import { exportedgroups } from '../dummyGroups';

function GroupBox() {


    const [groups, setGroups] = useState([]);
    const [searchfield, setSearchfield] = useState('');



    useEffect(() => {
        fetch('http://localhost:3000/groups/get_all_groups')
            .then(response => response.json())
            .then(groups => { setGroups(groups.data.groups);
                console.log('GroupBox');
                console.log(groups.data.groups)
                console.log('exportedgroups');
                console.log(exportedgroups);
            });

        // setGroups(exportedgroups);
        // console.log("local data" + exportedgroups);

        // const getAllGroups = async () => {
        //     let groupData = await fetch('http://localhost:3000/groups/get_all_groups');
        //     let groupList = await groupData.json();
        //     setGroups(groupList.data.groups);
        // }

        // getAllGroups();
    }, []);

    console.log(groups);
    const onSearchChange = (event) => {
        setSearchfield(event.target.value);
    }
    const filteredGroups = groups.filter(group => {
        console.log("FilteredGroup");
        console.log(group);
        return group.name.includes(searchfield);
    });

    return (
        <div className='GroupBox'>
            <div className='flex'>
                <div className='flex flex-column'>
                    <div className='flex justify-start fw1 f3'>
                        Groups
                        </div>
                    <div className='flex justify-start'>
                        <SearchBox searchChange={onSearchChange} />
                    </div>
                    <div className='GroupList'>
                        <GroupList groups={filteredGroups} />
                    </div>
                </div>
            </div>

        </div>
    );

}

export default GroupBox;

Answer 1

Your name field value getting as undefined.

try this one,

const filteredGroups = groups.filter(group => {
    console.log("FilteredGroup");
    console.log(group);
    return group.name?.includes(searchfield); //adding "?" mark 
});