how to destructure this.props react js
I think the best way to refactor your problem is to use React programming pattern: a stateful, parent component passes down a prop to a stateless, child component. So, you don't ever need to declare mesas as a class, it is just a functional component because we dividing components into presentational components and container components.
But, I didn't get about the App's state, if you plan to use external storage fine, but if you need to manage the local state, just insert the mesas in your App under constructor. However, abstracting, based on your code, my  refactoring:
// App.js
import React from 'react';

const mesas = [{
      id: 1,
      valor: 500,
      produtos:['COCA COLA', 'FANTA']
    },{
      id: 2,
      valor: 100,
      produtos:['PRATO1', 'PRATO2']
    }]
const App = () =&gt; {
    return (&lt;ListaMesas mesas = {mesas} /&gt;)
}

// Mesas.js
import React from 'react';

export const mesas = ({ mesas }) =&gt; {
    const mesasList = mesas.map((mesa) =&gt; {
        &lt;div key={mesa.id}&gt;
            &lt;text&gt;{mesa.id}&lt;/text&gt;
        &lt;/div&gt;
    })
    return (
        &lt;div&gt;
            {mesasList}
        &lt;/div&gt;
    )
}