How to use For Loop inside the map function in ReactJS

Question

for loop doesn't work inside the map function I create map function in map function add if condition and want to change the ID value in each iteration. To accomplish this I tried for loop but this is not working yet.

How I can use For Loop inside the map function?

 {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> for (var i = 0; i < d.ID; i++) { <--- for loop does'nt working {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 )} } </tbody> </Table> </div> } /> ))}

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

Answer 1

...

function App() {
  const [items, setItems] = useState([]);
  const [products, setProducts] = useState([]);

  const renderProducts = (d, products)=> {
    const result = []
    for (var i = 0; i < d.ID; i++) {  
      let product = 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                              
        )
        result.push(product)
      }
    return result
  }

  ... 

  return (
    <div className="container-fluid">
      <section className="heading">
        <h4>Products Details</h4>
        <input
          type="file"
          className="input-field"
          onChange={(e) => {
            const file = e.target.files[0];
            readExcel(file);
          }}
        />
      </section>
      {items.map((d) => (
        <Accordion
          title={
            <div>
              <tr key={d.ID} 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>
                  {renderProducts(d, products)}
                </tbody>
              </Table>
            </div>
          }
        />
      ))}
    </div>
  );
}
export default App;