html - Conditional rendering react

Question

I need to apply a css class once to the LilCard component but not on the BigCard component. I do need to rendering them in the same map function so, I can't find a way to apply the "problem" class only to LilCard.

        {results.map((item) => {
          return (
            <div className="problem"> <--- Here
              {item.map((subitem, i) => {
                if (i !== 0) {
                  return <LilCard article={subitem} />;
                } else {
                  return <BigCard article={subitem} />;
                }
              })}
            </div>
          );
        })}

The html is looking like this, i want BigCard to be wrapped with "col-lg-6 mb-5 mb-lg-0" class and LilCard to be wrapped in "col-lg-6 pl-lg-4" class.

         <div class="row">
             <div class="col-lg-6 mb-5 mb-lg-0">
                 <div class="entry2">
                     <a href="single.html"><img src="images/img_1.jpg" alt="Image" class="img-fluid rounded"></a>
                     <span class="post-category text-white bg-success mb-3">Nature</span>
                     <h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
                     <div class="post-meta align-items-center text-left clearfix">
                         <figure class="author-figure mb-0 mr-3 float-left"><img src="images/person_1.jpg"
                                 alt="Image" class="img-fluid"></figure>
                         <span class="d-inline-block mt-1">By <a href="#">Carrol Atkinson</a></span>
                         <span>&nbsp;-&nbsp; February 10, 2019</span>
                     </div>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
                         sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
                         beatae quia porro id est.</p>
                 </div>
             </div>
             <div class="col-lg-6 pl-lg-4">
                 <div class="entry3 d-block d-sm-flex">
                     <figure class="figure order-2"><a href="single.html"><img src="images/img_2.jpg" alt="Image"
                                 class="img-fluid rounded"></a></figure>
                     <div class="text mr-4 order-1">
                         <span class="post-category text-white bg-success mb-3">Nature</span>
                         <h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
                         <span class="post-meta mb-3 d-block">May 12, 2019</span>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor
                             laudantium sed optio.</p>
                     </div>
                 </div>
                 <div class="entry3 d-block d-sm-flex">
                     <figure class="figure order-2"><a href="single.html"><img src="images/img_3.jpg" alt="Image"
                                 class="img-fluid rounded"></a></figure>
                     <div class="text mr-4 order-1">
                         <span class="post-category text-white bg-success mb-3">Nature</span>
                         <h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
                         <span class="post-meta mb-3 d-block">May 12, 2019</span>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor
                             laudantium sed optio.</p>
                     </div>
                 </div>
                 <div class="entry3 d-block d-sm-flex">
                     <figure class="figure order-2"><a href="single.html"><img src="images/img_4.jpg" alt="Image"
                                 class="img-fluid rounded"></a></figure>
                     <div class="text mr-4 order-1">
                         <span class="post-category text-white bg-success mb-3">Nature</span>
                         <h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
                         <span class="post-meta mb-3 d-block">May 12, 2019</span>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor
                             laudantium sed optio.</p>
                     </div>
                 </div>
             </div>
         </div>

Thanks everyone.

question from:https://stackoverflow.com/questions/65919847/conditional-rendering-react

Answer 1

You basically want to show first items in your subarrays as BigCard and other's to be LilCard Component( Update From comments section.

I have updated my code to get that behavior.

CODESANDBOX LINK:

https://codesandbox.io/s/life-is-a-challenge-42vjj

WORKING CODE SNIPPET:

const App = ()=>{
  const articles = [
    [
      {
        id: 1,
        title: "test"
      },
      {
        id: 2,
        title: "test2"
      },
      {
        id: 3,
        title: "coucou"
      }
    ],
    [
      {
        id: 1,
        title: "ekip"
      },
      {
        id: 2,
        title: "bjr"
      }
    ]
  ];
  return (
    <div className="App">
      {articles.map((array) => {
        return array.map(({ id, title }) => {
          const item =
            id === 1 ? <BigCard title={title} /> : <LilCard title={title} />;
          return item;
        });
      })}
    </div>
  );
}

const BigCard = ({title}) => {
  return <article className="bigCard">I am a Big Card :  {title}</article>;
};

const LilCard = ({title}) => {
  return <article className="lilCard">I am a little Card {title}</article>;
};



ReactDOM.render(<App/>, document.getElementById("root"));

.lilCard {
  height: 100px;
  width: 100px;
  background: green;
  margin: 0.5rem 0;
}

.bigCard {
  height: 200px;
  width: 200px;
  background: orange;
  margin: 0.5rem 0;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>