i want to fetch objects with stage_id="1" , "2" ,"3" , how can I add 2 and 3 in the same map function.

    {orders.map((e) => {
        return (
          <>
            <div className={`container bg-${bg}`}>
              <div className="row">
                <div className="col-sm-6">
                  {e.stage_id ==="1" ? (
                    <div className="card my-2">
                      <div className="card-body">
                        <h5 className="card-title">Order No.#{e.id}</h5>
                        <p className="card-text">
                          Total Price = {e.total_price} <br /> Stage Id ={" "}
                          {e.stage_id} <br /> Payment Status Id ={" "}
                          {e.payment_status_id} <br />
                          Created Date = {new Date(e.createdAt).toGMTString()}
                        </p>
                      </div>
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          </>
        );
      })}

CodePudding user response：

I can't tell exactly whether you just want to know how to render all the orders in the map, or how to only render orders 1, 2 and 3, or something else?

If you want to render all items, then you can just do this: (note that I've removed the outer fragment <></> as you don't need this and added key={order.id} as you need to tell React how to uniquely identify all items in a list when you render them - see here).

{orders.map((order) => (
  <div key={order.id} className={`container bg-${bg}`}>
    <div className="row">
      <div className="col-sm-6">
        <div className="card my-2">
          <div className="card-body">
            <h5 className="card-title">Order No.#{order.id}</h5>
            <p className="card-text">
              Total Price = {order.total_price} <br /> Stage Id ={" "}
              {order.stage_id} <br /> Payment Status Id ={" "}
              {order.payment_status_id} <br />
              Created Date = {new Date(order.createdAt).toGMTString()}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
))}

If you just want to render orders 1, 2 and 3, then you can do this:

{orders
  .filter((order) => ["1", "2", "3"].includes(order.stage_id))
  .map((order) => (
    <div key={order.id} className={`container bg-${bg}`}>
      <div className="row">
        <div className="col-sm-6">
          <div className="card my-2">
            <div className="card-body">
              <h5 className="card-title">Order No.#{order.id}</h5>
              <p className="card-text">
                Total Price = {order.total_price} <br /> Stage Id ={" "}
                {order.stage_id} <br /> Payment Status Id ={" "}
                {order.payment_status_id} <br />
                Created Date = {new Date(order.createdAt).toGMTString()}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  ))}

...or if there are a lot of orders and you want to avoid iterating over all of them twice, do this:

{orders.map((order) => {
  if (!["1", "2", "3"].includes(order.stage_id)) {
    return null;
  }
  return (
    <div key={order.id} className={`container bg-${bg}`}>
      <div className="row">
        <div className="col-sm-6">
          <div className="card my-2">
            <div className="card-body">
              <h5 className="card-title">Order No.#{order.id}</h5>
              <p className="card-text">
                Total Price = {order.total_price} <br /> Stage Id ={" "}
                {order.stage_id} <br /> Payment Status Id ={" "}
                {order.payment_status_id} <br />
                Created Date = {new Date(order.createdAt).toGMTString()}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
})}

..or if you're asking something else, let us know and we'll try to help!