foreign-sapphire•5mo ago

how to hide some fields depending on one other?

in the edit field i can hide the field using watch exported from useForm but i also need to hide the field in the show field. im not using useForm in the show field. im using useShow const {queryResult: {data, isLoading, isError, error, failureReason}} = useShow(); as far as i have checked there is no watch method in the useShow hook. any ideas?

2 Replies

kapa.ai•5mo ago

Hi @atakan0298. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In the useForm hook, you can use the watch function to conditionally render fields based on the value of another field. However, the useShow hook does not provide a watch function because it's not designed for form handling or input tracking. It's used to fetch and display a single record from your resource. If you want to conditionally display fields in a "show" view, you would typically handle this in your component's render logic, not via the useShow hook. You can conditionally render components in React based on the data you get from useShow. Here's a basic example:

const {queryResult: {data, isLoading, isError, error, failureReason}} = useShow();

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

return (
  <div>
    <p>ID: {data.id}</p>
    <p>Title: {data.title}</p>
    {data.status === 'published' && <p>Status: {data.status}</p>}
  </div>
);

const {queryResult: {data, isLoading, isError, error, failureReason}} = useShow();

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

return (
  <div>
    <p>ID: {data.id}</p>
    <p>Title: {data.title}</p>
    {data.status === 'published' && <p>Status: {data.status}</p>}
  </div>
);

In this example, the "Status" field is only rendered if the status of the data is 'published'. You can adjust this logic based on your own conditions and data structure. For more complex scenarios, you might need to create a custom hook or use additional state management. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@594767835386085376> kapa.ai is still learning and improving, please let us know how it did by reacting below