'use client'
import NormalRow from "./NormalRow";
import EditableRow from "./EditableRow";
import { useState } from "react";

function SingleRow({ item }) {
const { 'ID Student': student, 'Mark': mark, 'Weight': weight, 'ID Teacher': teacher, 'ID Subject': subject, 'Date of issue': dateObject, 'ID Mark': markID } = item;
//switch between editable or read-only (normal)
const [editable, setEditable] = useState(false);
const [rowData, setRowData] = useState({ student, mark, weight, teacher, subject })

//convert date object to string format
const date = dateObject.toUTCString();

const TriggerEdit = ({ newData } = undefined) => {
setEditable((prev) => !prev);
if (newData !== undefined) {
setRowData(newData);
}
}

if (editable) {
return <EditableRow
student={rowData.student}
mark={rowData.mark}
weight={rowData.weight}
teacher={rowData.teacher}
subject={rowData.subject}
date={date}
TriggerEdit={TriggerEdit}
markID={markID}
/>
}

return <NormalRow

// when i pass {student} it works fine
student={rowData.student}

mark={rowData.mark}
weight={rowData.weight}
teacher={rowData.teacher}
subject={rowData.subject}
date={date}
TriggerEdit={TriggerEdit}
/>
}

export default SingleRow;

here is some of my code

Hello.

Just to be clear. You have a page component, get the search params and assign them as the initial value of a state variable, and then you use this state? And the problem is this state doesn't get updated when the page search params change?

Exactly

Well, in that case I would recommend removing the state variable and using the value from search params directly.

The reason why the search params change doesn't trigger a re-render with your component is because you're using a state variable and that initial value is still being used, that's why react provides 2 values when you use useState: the current state and a function to update the state (and this function does trigger a re-render).

Let me know if you have further questions.

Unfortunately i was trying to make something more complicated. I have this simple table with data fetched from sql db. I want to be able to edit rows and when i succeed i want the row to change on the client side.

So i decided to use useState() for every row but it doesn't work

i am a begginer so i don't have many ideas how could i approach it

maybe i should use useRef?

Ok I understand. Keep in mind that you're creating a new state variable (2 actually) for every row in your table and this might be unnecessary.

Also, when you make changes they'll only be reflected in the client. In the context of Next.js you could perform a mutation and then revalidate that segment to make sure the data you fetch is always up to date.

hmm

yeah my solution seems not optimal

i think i will just force refresh because it is just an academic project without much traffic on the database side

although i am curious now how to approach similar problem correctly

anyway thank you very much for your help

I'd still use the editable state variable, so you decide which version to render. But the EditableRow would have to trigger and update to your db to update the record and it that goes well, you can revalidate the table page so your data is refetched.

A different approach could be opening a modal so the user can update the row data, or even include a button to take the user to another page so you have a form for example with the data. Those are just alternatives.

EditableRow triggers the sql edit procedure on the db, i was just trying to make the change appear instantly on the client side. Now that i think about it idk if there would be an delay between the edit and the update in the database table. Because i am awaiting a response anyway

You can check the docs on revalidating data: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#revalidating-data