Hello, I'm trying to make a pages with multiple questions.

Ive use server component to retrieve my data and get a const questions = [id: number, question: string, answer: string, isTrue: boolean ....]

and bring it to a client component to use useState() and useEffect to show 1 question at a time

and my problems is ive got a true and false button that will update the current question in my database
but the id of the current question is in the client component (because i use useState to iterate through the questions )


ive tried to put the two button (true and false button) in a server component and put it inside the client component with { props.children } and use React.CloneElement to give the id as an extra props
but it failed

i can put all a questions with the two button in a server component and hide all the questions in client component that are not the current with css
but i d'ont think this is the best solution
or
i can make a differente pages to make one question on each pages ( [[question-id]] ) but changing pages for each questions for the user is not the best.

and because we can't use useEffect and useState in server component idk
how to itterate on each question when the user click on the true of false button and send the response at the same time in the backend

if you have tips for that it will be really helpfull for me.



ps: this is what is look like but currently the button wont communicate with the server
and sorry if i was not clear with my question