Export function returns undefined

I am trying to display the content of the selected li tag based on its content. Eg: if user click color, the content should display all the colors. Otherwise, shapes will display all shapes.

The above is just an example but what I want to achieve is something similar. I have 2 svelte components. SchemaNav.svelte basically handles the Tab function between different li items. And Table.svelte handles the tables that I want the content to be displayed.

SchemaNav.svelte

<script>
var list;
    export function onItemClick(names) {
         list = names.table_name; //to get the selected li value 
        return list;
    }

     
<script>
    {#if activeItem === "common"}
        <div class="content">
            <div class="tname">
                {#each name as names }
                    {#if names.table_schema === activeItem}
                        <ul>
                            <li on:click={() => onItemClick(names)}>
                            {names.table_name}</li>
                            
                        
                            
                        </ul>
                    {/if}
                {/each}
            </div>
            <Table  />
            
    </div>  
{/if}   

Tables.svelte

<script>
import {onItemClick} from './SchemaNav.svelte';
</script>
            <table class="table table-bordered table-hover dt-responsive">
                <caption class="text-center">Column names</caption>
                    <thead>
                        <tr>
                            <th>Column Name</th>
                            <th>Data Type</th>
                        </tr>
                    </thead>
                    <tbody>
                    {#if {onItemClick} === info.table_name}
                    {#each info as item}
                        
                        <tr>
                            <td>{item.column_name}</td>
                            <td>{item.data_type}</td>
                        </tr>
                     
                    {/each}
                    {/if}
                    </tbody>
            </table>

The error I'm getting is:GET http://localhost:3000/client/undefined net::ERR_ABORTED 404 (Not Found) (anonymous) @ catalog:70

How do I get the selected Li item to display its content accordingly...