如何解决此输出 [object Object] 的对象数组？

Question

I am trying to Pass an array of Objects through a map function, but when trying to obtain those Objects, I am receiving [object Object] as output. The data I am passing is

const Data =[
    {
   "Date":"Thu Jul 06 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"9 seats available",
  
  },
  {
   "Date":"Fri Jul 07 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty":"7 seats available",
  },
  {
   "Date":"Sat Jul 08 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"10 seats available",
  },
  {
   "Date":"Sun Jul 09 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"3 seats available",
  },
  {
   "Date":"Mon Jul 10 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"14 seats available",
  },
  
  {
   "Date":"Wed Jul 12 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty": "12 seats available",
  },
  {
   "Date":"Thu Jul 13 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty": "15 seats available",
  },
  {
   "Date":"Fri Jul 14 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty":"8 seats available",
  },
  {
   "Date":"Sat Jul 15 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty":"1 seats available"
  } 
  ]

The map function I am passing it to

      {Data.map((d, i) => {
          return (
           <div key={i} >
      <table>
      <tr>
        <td className="date">{d.Date}</td>
        <td className="time">{d.Time}</td>
        <td className="availability" >{d.Availabilty}</td>
        {console.log(d)}
        <td><button value={d} onClick={(e)=>{
          decNum(e);
          }}>Book Now</button></td>
      </tr>

</table>

When I am trying to get the values through onclick event, I am getting the mentioned [object Object] output. I am able to get the values as d.Date or D.Time or D.Availabilty But what i want is to get the result for d and not a particular key. Thank you in advance.

Answer 1

Try this:

{Data.map((d) => {
  const {Date: date, Time, Availabilty} = d;
  return (
   <div key={`${date}${Time}${Availabilty}`}>
     <table>
        <tr>
          <td className="date">{date}</td>
          <td className="time">{Time}</td>
          <td className="availability" >{Availabilty}</td>
          <td><button value={d} onClick={decNum}>Book Now</button></td>
        </tr>
      </table>
    </div>
  )
}