How to refactor code with ternary operators using react?

Question

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.

Drew Reese · Accepted Answer · 2020-06-06 23:39:10Z

2

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;
}

answered Jun 6, 2020 at 23:39

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

someuser2491 Over a year ago

After changing to this {isAdmin && <RenderLink isCount={isCount} />} it displays email us button even though it should display link to add. and also i see error "type {isCount: boolean is not assignable to type {intrinisicAttributes && false} or type {intrinsicAttributes && true}

Collectives™ on Stack Overflow

How to refactor code with ternary operators using react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related