Map function giving undefined in react.js

See more:

Javascript

MongoDB

ReactJS

I am trying to to map a list with json data, all is going well but when I am trying to map a button with value, it is giving undefined .

List of data is like this -

var data = {
  name: 'routes',
  size: '0MB',
  path: '/home/design-studio/Desktop/tong-project/yourdrive/routes',
  url: 'routes',
  len: 12
},
{
  name: 'temp.txt',
  size: '0MB',
  path: '/home/design-studio/Desktop/tong-project/yourdrive/temp.txt',
  url: 'temp.txt',
  len: 12
},
{
  name: 'uploads',
  size: '0MB',
  path: '/home/design-studio/Desktop/tong-project/yourdrive/uploads',
  url: 'uploads',
  len: 12
},
{
  name: 'views',
  size: '0MB',
  path: '/home/design-studio/Desktop/tong-project/yourdrive/views',
  url: 'views',
  len: 12
}

My react.js code looks like this -
I want different url object, but unexpectedly I am getting undefined or some last object of the file.url

What I have tried:

return(<Table striped bordered hover size="sm">
        <thead>
          <tr>
            <th> </th>
            <th>File Name</th>
            <th>File Size</th>
            <th>File Items</th>
          </tr>
        </thead>
        <tbody>
          {data.map((file) => (
            <tr>
              <td>
                <Button onClick={handleOpen(file.url)}>Open</Button>; {/* I am getting undefined here, or sometimes last object of the file.url */}
              </td>
              <td>{file.name}</td>
              <td>{file.size}</td>
              <td>{file.len}</td>
            </tr>
          ))}
        </tbody>
      </Table>
);