[FIXED] How to disable update when the user enter the same informations

Issue

I have a component that takes the Project object from API and displays it in jsx.

The user can enter information and update the Project but I don't want to enable the update when he enters the same values.

I am using NextJS I get the project and pass it to the page with getServerSideProps.

export async function getServerSideProps(context) {
  console.log("getStaticProps Chapter Details starts");
  const id= context.params.projectId;
  const project = await axios.get(`http://127.0.0.1:5000/get-project/${projectId }`);
  return {
    props: {
      project : project.data,
    },
  };
}

In the page component, I set the title and description direction of the project.

const [title, setTitle] = useState(project.title);
const [description, setDescription] = useState(project.description);

And, I gave those values to MUI TextField, the logic works fine but I want the user to not be able to update the project with the same values.

Solution

this is a function tha compare two string arrays return true if the values are equals else it reurns false

export const verifySame = (origin, newInfo) => {
var repeat = true;
var i = 0;
while (repeat && i < origin.length) {
if (String(origin[i]) !== String(newInfo[i]))  {
repeat = false;
}
i++;
}
return repeat;
};

give the result of this function to the disabled proprety of your Update button so the button will be desabled even if he changes the values then go back to the old ones

<button
disabled={verifySame(
[projet.title,project.description],[title,description]
)}
onClick={()=>{// your logic}}
</button>

Answered By - Ahmed Sbai
Answer Checked By - - Marie Seifert (ReactFix Admin)