Events handlers cannot be passed to Client Component props

[fair estuary]

Hi @rich stone. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, event handlers cannot be passed to Server Component props. This means you need to ensure that any interactive parts of your application, such as event handlers, are handled within Client Components.

To achieve your goal of querying Firestore and embedding tweets based on search input, you need to split your component into Server and Client Components appropriately. Here’s how you can do it:

1. Create a Client Component for the interactive part: This component will handle the search input and fetch the data.

2. Use dynamic imports for fetching data: This ensures that the fetching logic is executed on the client side.

Here’s an example of how you can refactor your code:

// components/SearchBar.js
'use client'

import { useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, query, where, getDocs } from 'firebase/firestore';

const firebaseConfig = {
  // your firebase config
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const search = async (squery) => {
  const ref = collection(db, "users");
  const fsquery = query(ref, where("tagsArray", "array-contains", squery));
  const querySnapshot = await getDocs(fsquery);
  let aList = [];
  querySnapshot.forEach((doc) => {
    aList.push(doc.data().videoURL);
  });
  let embedList = [];
  for (let i = 0; i < aList.length; i++) {
    const tempURL = aList[i];
    let embedFetch = await fetch(`<https://publish.twitter.com/oembed?url=${tempURL}`>);
    let embedFetchJson = await embedFetch.json();
    embedList.push(embedFetchJson.html);
  }
  return embedList;
};

export default function SearchBar() {
  const [embedList, setEmbedList] = useState([]);

  const handleChange = async (e) => {
    const embeds = await search(e.target.value);
    setEmbedList(embeds);
  };

return (
<div>
<label htmlFor="search">Search</label>
<input placeholder="?" onChange={handleChange}></input>
<div>
{embedList.map((s, index) => (
<div key={index} dangerouslySetInnerHTML={{ __html: s }} />
))}
</div>
</div>
);
}

3. **Use the Client Component in your main page**:

```jsx
// app/page.js
import SearchBar from '../components/SearchBar';

export default function Home() {
  return (
    <main className="">
      <SearchBar />
    </main>
  );
}

Key Points:

• Client Components: Use use client directive to ensure the component is treated as a Client Component.
• Event Handlers: Handle event handlers within Client Components to avoid errors.
• Dynamic Imports: Use dynamic imports for fetching data within event handlers if needed.

For more details on handling event handlers and Client Components, refer to the Next.js documentation on Client Components (https://nextjs.org/docs/app/building-your-application/rendering/client-components).

By following this approach, you ensure that your interactive logic is correctly handled on the client side, avoiding issues with event handlers in Server Components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: