spare cloud
'use client'
import React from "react";
import { useState } from "react";
import SearchBar from "../searchbar/searchbar";
import Display from "../display/display";
import DataFetch from "../display/dataFetch";
export default function HomeBody() {
const [text, setText] = useState('')
const [isActive, setActive] = useState(0)
const handleChange = (e) => {
setText(e.target.value)
}
const handleSearchClick = (e) => {
e.preventDefault()
setActive(1)
}
return (
<>
<SearchBar text={text} onChange={handleChange} onSubmit={handleSearchClick}/>
<Display text={text} isActive={isActive}><DataFetch/></Display>
</>
)
}
here I am trying to take the text from the searchbar component and pass it my display component and use the a server component to then make an api request to display the data I was under the assumption that to I needed to pass the server component as a prop for the client component like so here is the code for my display component
export default function Display({ text, isActive, children }) {
return (
isActive ? (
<div>
{children}
</div>
) : (
<div />
)
);
}
here is my server component
export default async function DataFetch() {
return <div>Server</div>
}
I am not trying to do anything crazy rn just want to understand why this isnt working I thought I am properly passing in the server component as a prop but I keep getting an async await error when the async function is inside a server component
shut lichen
pseudo phoenix
