I have a function that calls an API, and returns an array when console.logged. Use effect is running, and return the array normally but it never updates the front end. Have been working on this for a while, and haven't found a solution. Am I missing something?

useEffect(()=>{
        const fetchData = async (user) => {
            console.log(user)
            const { data, error } = await supabase
                .from('contacts')
                .select()
                .match({ user_id: user })
            return data;
        }
        const user = supabase.auth.user().id;
        fetchData(user).then((data)=> {
            // console.log(data)
            setContacts(data);
            console.log(contacts)
        }).catch(error=>{
            console.log(error)
        })
        // returns an array or objects. each object is a contact    
    },[contacts])
    return(
        <div>
            <h1>All Contacts</h1>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>email</th>
                    <th>phone</th>
                    <th>notes</th>
                </tr>
                {
                    contacts.map((contact, i) => {
                        <tr key={i}>
                            <td>{contact.prosepct_name}</td>
                            <td>{contact.prospect_email}</td>
                            <td>{contact.prospect_phone}</td>
                            <td>{contact.notes}</td>
                        </tr>
                    })
                }
                
            </tbody>

CodePudding user response：

On first glance - it looks like you need to wrap the inner part of your map function in a return.

 {
    contacts.map((contact, i) => {
      return (
        <tr key={i}>
          <td>{contact.prosepct_name}</td>
          <td>{contact.prospect_email}</td>
          <td>{contact.prospect_phone}</td>
          <td>{contact.notes}</td>
        </tr>
      )
    })
  }