output an Array from an Array of objects in an API response in react component-CodePudding

I have data from an API which is an array of objects, there is an array inside the objects which i am trying to output on my react component. instead of displaying an array, it displays a joined version of the items in the array

{rides && <div>{rides.map((ride)=>
  (<div >
      <div className="flex bg-[#111] text-white my-3"key={ride.id} >
      <div className="card bg-[#111] m-4 rounded-xl">
            <div className="flex">
                <div className="imageBox">
                  
                    <img  className="rounded" src={ride.map_url} alt="" />
                </div>
                <div className="contentBox mx-3">
                    <p className="my-2">Ride id: {ride.id}</p>
                    <p className="my-2">Origin Station: {ride.origin_station_code}</p>
                    <p className="my-2">Origin Path: {ride.station_path}</p>
                    <p className="my-2">Date: {ride.date}</p>
                    <p className="my-2">Distance</p>
                    
                </div>
            </div>
    </div>
          </div> 
  </div>
      

    )
  )}</div>}

this is the json data i am trying to display station_path as an array in the component

[{"id":515,"origin_station_code":15,"station_path":[28,31,43,57,63,76,86],"destination_station_code":90,"date":"02/06/2022 03:50 PM","map_url":"https://picsum.photos/200","state":"Delhi","city":"Delhi"},{"id":464,"origin_station_code":5,"station_path":[55,60,72,86],"destination_station_code":90,"date":"03/10/2022 07:53 PM","map_url":"https://picsum.photos/200","state":"Dadra and Nagar Haveli","city":"Silvassa"},{"id":941,"origin_station_code":18,"station_path":[46,58,60,79,86],"destination_station_code":99,"date":"04/03/2022 01:53 PM","map_url":"https://picsum.photos/200","state":"Chhattisgarh","city":"Durg"},{"id":197,"origin_station_code":9,"station_path":[67,71,80],"destination_station_code":95,"date":"02/04/2022 04:10 PM","map_url":"https://picsum.photos/200","state":"Telangana","city":"Adilabad"},{"id":792,"origin_station_code":14,"station_path":[53,64,79,88],"destination_station_code":90,"date":"03/03/2022 09:29 AM","map_url":"https://picsum.photos/200","state":"Meghalaya","city":"Shillong"},

CodePudding user response：

You can use JSON.stringify(ride.station_path) to display array.