How to fetch data from a specific user

Question

So my question is, how do i link every Item to the right users and how to fetch the data right? I want ever user in my json db to have a multiple goalItems. As every User has a unique Id, for fetching the data only from the specific user i tried by using "fetch ('http://localhost:5000/goalItems? usersId={usersId}')" but it didn't work.

Down Below you can find the DB.json file, the FULLGOAl Component, thats where the data is fetched and the GoalItem-Component

DB.JSON

{
  "users": [
    {
      "id": "1",
      "name": "Jules",
      "logindate": ""
    }
  ],
  "goalItems": [
    {
      "id": 1,
      "usersId": "",
      "text": "XY",
      "completed": false,
      "completedDate": "18.2.2022, 14:18:24",
      "note": "XY"
    },
    {
      "id": 2,
      "usersId": "",
      "text": "ZY",
      "completed": true,
      "completedDate": "17.2.2022, 16:40:56",
      "note": "ZY"
    }
  ]
}

FullGoal this is where the data is fetched

import React, {useState, useEffect} from 'react'
import GoalItems from './GoalItems'
import DropDownMenu from "./DropDownMenu"
import CompletedLevelPopUp from './CompletedLevelPopUp'
import {useParams} from "react-router-dom";
import levelBatch1 from "./Icons/LevelBatch1.svg"
import levelBatch2 from "./Icons/LevelBatch2.svg"



const levelOption ={

  1: 
  ["A",
  "B",
  "C"
], 
  2: ["D",
  "E",
  "F" 
}


const FullGoal = ({setNextLevelOpen}) => {


  const [editLevel, setEditLevel] = useState(true)
  const [goalItems, setGoalItems] = useState ([])
  const [completedDate, setCompletedDate] = useState (false)

  useEffect (() => {
        
    var completedItems = []
    goalItems.forEach(g => g.completed === true | completedItems.push(g.completed))
    console.log(completedItems)

    if(completedItems.length > 0){
      
      function allCompl(element) {
        return element === true
        
      }
    completedItems.every(allCompl) ? setOpenPopup (true) :  setOpenPopup(false)
    
    }
  }, [goalItems])



  useEffect (() => {
    const  getGoalItems = async () => {

       const goalItemsFromServer = await fetchGoalItems()
       setGoalItems(goalItemsFromServer)
     }

   getGoalItems()

 }, [])

  // Fetch Goals

  const fetchGoalItems = async () => {
    const res = await fetch ('http://localhost:5000/goalItems? usersId={usersId}') 
    const data = await res.json()

    return data
  }


  //Fetch Goal
  const fetchGoal = async (id) => {
    const res = await fetch (`http://localhost:5000/goalItems/${id}`) 
    const data = await res.json()

    return data
  }



const addGoal = async (goal, id) =>{ 

  const res = await fetch (`http://localhost:5000/goalItems`, {
   method:'POST',
   headers:{
     'Content-type': 'application/json'
   },
   body: JSON.stringify(goal)
  })

  const data= await res.json ()
  setGoalItems([...goalItems, data])
}



const toggleChecked = async (id) =>{


  const goalToToggle = await fetchGoal(id) 
  const updatedGoal = {...(goalToToggle), completed : !goalToToggle.completed , completedDate : new Date().toLocaleString() + ""}

  const res = await fetch (`http://localhost:5000/goalItems/${id}`, {
    method: 'PUT',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify(updatedGoal)
  }) 

  const data = await res.json()


  setGoalItems(goalItems.map((goal)=> goal.id === id

  ? {...(goal), completed: data.completed, completedDate:data.completedDate} : goal
        
))}

const deleteFromJson = async (id) => {
  await fetch(`http://localhost:5000/goalItems/${id}`, {
    method: 'DELETE'
  })

  setGoalItems(goalItems.filter((goal) => goal.id !== id)) 
  
}



const noteSaveJson = async (id) => {

  goalItems.forEach( async e=> {
    const res = await fetch (`http://localhost:5000/goalItems/${e.id}`, {
      method: 'PUT',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(e)
    }) 
  })
    
 }


 useEffect (noteSaveJson, [goalItems])






  return (
    <div className="fullGoal">
        
        <div className="dropDownMenuBox">
          {editLevel && <DropDownMenu options={levelOption[level] || [] } onAdd={addGoal}/> }
        </div>
        <div className="goalItemsBox">
             <GoalItems id="goalItemBox"
               goalItems={goalItems} 
               completedDate={completedDate}
               onChange={v => { 
                         setGoalItems(v)
                         }} 
               onToggle={toggleChecked} 
               editLevel={editLevel} 
               onDelete={deleteFromJson} />
        </div>

    </div>
  )
}

export default FullGoal

** THIS IS THE GOALITEM COMPONENT **

import React, {useState} from 'react'
import {TiDelete} from 'react-icons/ti'
import {AiFillCheckCircle} from 'react-icons/ai'
 import {CgNotes} from 'react-icons/cg'



const GoalItems = ({goalItems, onToggle, editLevel, onChange, onDelete, completedDate}) => {


    const [noteOpen, setNoteOpen] = useState (false)
  
    return (
        <>

        {goalItems.map((goal, index)=>( 
       <>

       <div key={goal.id} className= {`singleGoalItem ${goal.completed ? 'completed' : ''}`} onDoubleClick={()=>onToggle(goal.id)}> 

            
            <h3 id="goalTitle">{goal.text}</h3> 

            <CgNotes id="goalIconNote" onClick={()=> setNoteOpen(!noteOpen)}/>
            
            {editLevel &&  <TiDelete id="goalIconDelete" onClick={()=> {
                onDelete(goal.id)
                goalItems.splice(index, 1)
                onChange([...goalItems])
            }}/>}
            
            {goal.completed ? <AiFillCheckCircle id="goalIconCheck"/> : ''}
                              
       </div>
        <div>
        {noteOpen?  <div className="noteBox">   
                                <textarea title="Note" 
                                    type ="text" 
                                    value= {goal.note}
                                    onChange= {(e)=> {
                                            goalItems[index].note= e.target.value 
                                    onChange([...goalItems])}}
                                placeholder='Füge hier Notizen, Ideen, Pläne ein'      
                                /> </div> : ""}
        </div>
    </>
       ))
       
       }


        </>
    )
}

export default GoalItems