How to add these elements in array to customize the code in reactjs

Question

I have written the code with lots of if else logics. I am trying to improve my code. Can anyone suggest me some better options. I am trying to print data based on conditions: functionOne and secondFunction are the methods which will return the component at multiple places. Gist of my code is: if length of myFirstDataArray is greater than 3, than print the secondFunction value , or else, check again the length of myFirstDataArray and so on.

const functionOne = (data) => {
    return (
      <SummaryOfValues
        data={data}
      ></SummaryOfValues>
    );
  };

  const secondFunction = (data) => {
    return (
      <ListOfValues
        data={data.info}
      ></ListOfValues>
    );
  };

{
  myFirstDataArray && myFirstDataArray.length >= 3 ? (
    <>
      <>
        {resultedDataArray
          .slice(0, 3)
          .map((data: any) => ({ secondFunction(data); }))}
      </>
    </>
  ) : (
    <>
      <>
        {resultedDataArray
          .slice(0, resultedDataArray.length)
          .map((data: any) => ({ secondFunction(data); }))}
      </>

      {myFirstDataArray && myFirstDataArray.length === 1 ? (
        <>
          {resultedDataArray
            .slice(myFirstDataArray.length)
            .map((data: any) => ({ functionOne(data); }))}
        </>
      ) : null}
      {myFirstDataArray && myFirstDataArray.length === 2 ? (
        <>
          {resultedDataArray
            .slice(myFirstDataArray.length, myFirstDataArray.length + 1)
            .map((data: any) => ({ functionOne(data); }))}
        </>
      ) : null}
    </>
  );
}

score 1 · Accepted Answer · 2020-09-24 20:29:32Z

1

How do you think of this solution?

const functionOne = (data) => {
    return (
        <SummaryOfValues
            data={data}
        ></SummaryOfValues>
    );
};

const secondFunction = (data) => {
    return (
        <ListOfValues
            data={data.info}
        ></ListOfValues>
    );
};

{
    myFirstDataArray && myFirstDataArray.length > 0 (
        <>
            <>
                {resultedDataArray
                    .slice(0, 3)
                    .map((data: any) => ({ secondFunction(data); }))}
            </>
            {myFirstDataArray.length < 3 ? (
                <>
                    {resultedDataArray
                        .slice(myFirstDataArray.length - 1)
                        .map((data: any) => ({ functionOne(data); }))}
                </>
            ) : null}
            </>
        );
}

edited Sep 24, 2020 at 20:29

answered Sep 24, 2020 at 19:46

user14325562

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

2 Comments

Singh Over a year ago

I am looking forward to remove as much as conditional rendering I can remove.

user14325562 Over a year ago

I've updated the code. Please let me know how you think of it.

Collectives™ on Stack Overflow

How to add these elements in array to customize the code in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related