how to disable update when the user enter the same informations-CodePudding

I have a component that takes the Project object from api and display it in jsx

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

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 title and description direction from 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

CodePudding user response：

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>