how to destructure this.props react js I'm trying to create a component that receives an array, this component is going to show a list with props data
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;)
}

The component:
class mesas extends Component {
    render(){
        const mesas = [this.props.mesas]
        mesas.map(function(item){
           return(
               &lt;div key ={item.id}&gt;
                   &lt;text&gt;{item.id}&lt;/text&gt;
               &lt;/div&gt;
           )
        })
        return(
            &lt;div&gt;  
                {mesas}
            &lt;/div&gt;
        )
    }
}

What is the best way to do this list?
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;
    )
}