I have syntax error when using filter method in ReactJS-CodePudding

I am using filter method to filter in API to return the value but i have issues syntax like Parsing error: Unexpected token, expected ",". I still don't know what happend the problem it is.Can someone help me?


function ListMobil({submit, data, penumpang, tipeDriver, tanggal, waktu}) {

    return (
        <div>
            <Navbar/>
            <Hero/>
            <Search/>
            <div className="container mt-4">
                <div className="row">
                    {
                    getListMobilResult ? (
                        getListMobilResult.filter((mobil) => ((mobil.capacity >= jPenumpang) 
                                                                && (mobil.driver == tDriver) 
                                                                && ((Date.parse((date(mobil.availableAt))) > formdate ))))
                        {
                            return (
                                    <div className="col-md-4" key={mobil.id}>
                                        <div className="card mb-3">
                                            <img src={`https://raw.githubusercontent.com/fnurhidayat/probable-garbanzo/main/public/images/${mobil.image.split('/')[2]}`} className='card-img-top' style={{ height: "300px", minWidth: "300px" }} alt={mobil.manufacture}/>
                                            <div className="card-body">
                                                <p className="card-text mb-2">
                                                    {mobil.type} {mobil.model}
                                                </p>
                                                <h5 className="card-title mb-2">
                                                    Rp{mobil.rentPerDay} / Hari
                                                </h5>
                                                <p className="card-text mb-2">{mobil.description}</p>
                                                <p className="card-text mb-2 "><FontAwesomeIcon icon={faUserGroup} /> {mobil.capacity}</p>
                                                <p className="card-text mb-2 "><FontAwesomeIcon icon={faGear} /> {mobil.transmission}</p>
                                                <p className="card-text mb-2 "><FontAwesomeIcon icon={faCalendar} /> {mobil.year}</p>
                                            </div>
                                        </div>
                                    </div>
                            )
                        })
                        ) : getListMobilLoading ? (
                            <p>Loading ...</p>
                            ) : (
                                <p>{getListMobilError ? getListMobilError : "Data Kosong"}</p>
                                )
                    }
                </div>
            </div>
            <Footer/>
        </div>
    );
}

export default ListMobil;

CodePudding user response：

I think this is what you're trying to do, but i had to add an entire call to .map for it to make sense:

<div className="row">
  {getListMobilResult ? (
    getListMobilResult
      .filter(
        (mobil) =>
          mobil.capacity >= jPenumpang &&
          mobil.driver == tDriver &&
          Date.parse(date(mobil.availableAt)) > formdate
      )
      .map((mobil) => {
        return (
          <div className="col-md-4" key={mobil.id}>
            <div className="card mb-3">
              <img
                src={`https://raw.githubusercontent.com/fnurhidayat/probable-garbanzo/main/public/images/${
                  mobil.image.split("/")[2]
                }`}
                className="card-img-top"
                style={{ height: "300px", minWidth: "300px" }}
                alt={mobil.manufacture}
              />
              <div className="card-body">
                <p className="card-text mb-2">
                  {mobil.type} {mobil.model}
                </p>
                <h5 className="card-title mb-2">Rp{mobil.rentPerDay} / Hari</h5>
                <p className="card-text mb-2">{mobil.description}</p>
                <p className="card-text mb-2 ">
                  <FontAwesomeIcon icon={faUserGroup} /> {mobil.capacity}
                </p>
                <p className="card-text mb-2 ">
                  <FontAwesomeIcon icon={faGear} /> {mobil.transmission}
                </p>
                <p className="card-text mb-2 ">
                  <FontAwesomeIcon icon={faCalendar} /> {mobil.year}
                </p>
              </div>
            </div>
          </div>
        );
      })
  ) : getListMobilLoading ? (
    <p>Loading ...</p>
  ) : (
    <p>{getListMobilError ? getListMobilError : "Data Kosong"}</p>
  )}
</div>