How to write if condition in table tags using ReactJS

Question

if condition is not working in ReactJS. I want to create an Accordion and fetch data from excel sheets. And set ID's which data is displayed which button and I am unable to create if conditions.

{items.map((d) => (
        <Accordion key={d.ID} 
          title={
            <div>
              <tr className="btn-heading">
                <td>{d.ID}</td>
                <td>{d.Mail}</td>
                <td>{d.Name}</td>
                <td>{d.PhoneNo}</td>
                <td>{d.City}</td>
                <td>{d.Date}</td>
                <td>{d.Time}</td>
              </tr>
            </div>
          }
          content={
            <div>
              <p className="header">
                  <span className="header-content">Shipping Address:</span>
                  292 Naqshband Colony. Near rabbania Mosque. Multan
              </p>
              <Table size="sm">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Article No</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total Amount</th>
                  </tr>
                </thead>
                <tbody>
                  {products.map((c) =>
                  (
                    if(c.ID === 1) {   <--- this if condition is not working      
                      <tr key={c.ID}>
                        <td>{c.ArticleNo}</td>
                        <td>{c.ProductName}</td>
                        <td>{c.Quantity}</td>
                        <td>{c.Price}</td>
                        <td>{c.TotalAmount}</td>
                      </tr> 
                    }                                        
                  ))};
                </tbody>
              </Table>

Here is my codesandbox: https://codesandbox.io/s/hungry-bardeen-8m2gh?file=/src/App.js

That's a syntax error. You need a block body => { and a return <JSX> statement. It's a very good idea to be familiar with JavaScript before touching a language extension like JSX — Aluan Haddad
– Aluan Haddad, Commented Sep 18, 2020 at 5:49

Maniraj Murugan · Accepted Answer · 2020-09-18 05:55:49Z

1

You could use ternary operator for checking if-else statement.

Modify the part of code as follows,

Change,

{products.map((c) =>
   (
    if(c.ID === 1) {   <--- this if condition is not working      
    <tr key={c.ID}>
     <td>{c.ArticleNo}</td>
     <td>{c.ProductName}</td>
     <td>{c.Quantity}</td>
     <td>{c.Price}</td>
     <td>{c.TotalAmount}</td>
    </tr> 
   }                                        
))};

To:

   {products.map((c) =>
     c.ID === 1 ? (
     <tr key={c.ID}>
      <td>{c.ArticleNo}</td>
      <td>{c.ProductName}</td>
      <td>{c.Quantity}</td>
      <td>{c.Price}</td>
      <td>{c.TotalAmount}</td>
    </tr>
    ) : null
   )}

Forked Sandbox:

edited Sep 18, 2020 at 5:55

answered Sep 18, 2020 at 5:50

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

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

6 Comments

Muzamil Hussain Over a year ago

Thanks for helping me. one another question that if I want ID 1 call when clicking button1 and ID 2 calls when the button 2 click and so on. It is possible or not?

Maniraj Murugan Over a year ago

@MuzamilHussain, Sorry couldn't get you. Where do you have buttons and ID's in your code?

Muzamil Hussain Over a year ago

ID's I have call in the excel file and I want to call different ID for each button. I mean this if statement every button can addl same data I want to add different data

Muzamil Hussain Over a year ago

I mean in this case, each accordion has same data and I want to add different data in each accordion. I hope you will get my point

Maniraj Murugan Over a year ago

@MuzamilHussain, That is something you are asking out of question context.. That needs to be explained in detail in another question about your requirement.. But for now I would say yes you can add ID to each button and for accordion collapsing for each you can take a look at codesandbox.io/s/react-accordion-forked-p4v8f

|

Collectives™ on Stack Overflow

How to write if condition in table tags using ReactJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related