CODEWITHSUNDEEP
reactjstypescript
someuser2491
someuser2491

Reputation: 1978

How to refactor code with ternary operators using react?

i have the code below and it works fine. but i want the code to look less repetitive and neat.

below is my code,

interface DescriptionProps {
   isAdmin: boolean | null;
   company: string;
   isCount: boolean;
}


function Description({
    isAdmin,
    companyName,
    isCount,
 }: DescriptionProps) {
     if (isAdmin) {
         return isCount ? (
             <span>{company + ' '}
                 <span>please email us.</span>
             </span>
         ) : (
             <span>{company + ' '}
                 <span>please add.</span>
             </span>
         );
     }
     return (
         <span>Request admin</span>
     );
 }

 interface Props {
     show: boolean;
     onHide: any;
 } 

 function Dialog({ show, onHide }: Props) {
     const isAdmin= //got from http request
     const count1 = 2; //is dynamic and can be any integer greater or less than 0
     const count2 = 1; //is dynamic and can be any integer greater or less than 0
     const isCount= count1 < 0 || count2 < 0;
     const isAdminAndisCount = isAdmin && isCount;

     return show ? (
         <Dialog>
             <Body>
                 <span>Title</span>
                 <Description
                     isAdmin={isAdmin}
                     company={company}
                     isCount={isCount}
                 />  
             </Body>
             <Actions
                 isAdminAndisCount={isAdminAndisCount}
             > 
             {((isAdmin && !isCount) || !isAdmin) && (
                 <Text onClick={onHide}>Close</Text>
             )}
             {isAdmin ? (
                 isCount ? (
                     <a href="eee">email us</a>          
                 ) : (
                     <a href="mmm">add</a>
                 )
             ) : null}
         </Actions>
     </Dialog>
 ) : null;

As you see from above code, i feel that the Actions and Description block could be refactored more. it looks slightly not readable or looks clumsy.

i want it be understandable easily with all those conditions still. but i am not sure how i can make this better still.

could someone help me with this. thanks.

Upvotes: 2

Views: 152

Answers (1)

Drew Reese
Drew Reese

Reputation: 203552

Simplify the return

function Description({ isAdmin, companyName, isCount }) {
  return isAdmin ? (
    <span>
      {companyName} {isCount ? "please email us." : "please add."}
    </span>
  ) : (
    <span>Request admin</span>
  );
}

Factor the second (nested) ternary into a react component and render it on the happy (truthy) path of isAdmin, and you can also simplify the outer ternary to be a simple isAdmin && ...

function Dialog({ show, onHide }) {
  const isAdmin = ""; //got from http request
  const count1 = 2; //is dynamic and can be any integer greater or less than 0
  const count2 = 1; //is dynamic and can be any integer greater or less than 0
  const isCount = count1 < 0 || count2 < 0;
  const isAdminAndisCount = isAdmin && isCount;

  const RenderLink = ({ isCount }) =>
    isCount ? <a href="eee">email us</a> : <a href="mmm">add</a>;

  return show ? (
    <Dialog>
      <Body>
        <span>Title</span>
        <Description isAdmin={isAdmin} company={company} isCount={isCount} />
      </Body>
      <Actions isAdminAndisCount={isAdminAndisCount}>
        {((isAdmin && !isCount) || !isAdmin) && (
          <Text onClick={onHide}>Close</Text>
        )}
        {isAdmin && <RenderLink isCount={isCount} />}
      </Actions>
    </Dialog>
  ) : null;
}

Upvotes: 2

Related Questions