how to destructure this.props react js

Question

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 = () => {
 return (<ListaMesas mesas = {{...Mesas}} />)
}

The component:

class mesas extends Component {
 render(){
 const mesas = [this.props.mesas]
 mesas.map(function(item){
 return(
 <div key ={item.id}>
 <text>{item.id}</text>
 </div>
 )
 })
 return(
 <div> 
 {mesas}
 </div>
 )
 }
}

What is the best way to do this list?

Answer 1

You don't really need to destructure at all, you can simply use props directly if you like

this.props.mesas.map(item => ...

example

class Mesas extends Component {
 render() {
 return (
 <div>
 {this.props.mesas.map(function(item) {
 return (
 <div key={item.id}>
 <text>{item.id}</text>
 </div>
 );
 })}
 </div>
 );
 }
}

but if you did want/need to destructure your props, then the correct pattern is

const { mesas } = this.props;

example

class Mesas extends Component {
 render() {
 const { mesas } = this.props;
 return (
 <div>
 {mesas.map(function(item) {
 return (
 <div key={item.id}>
 <text>{item.id}</text>
 </div>
 );
 })}
 </div>
 );
 }
}

At this point though there isn't much use in using a class-based component; no component lifecycle functions are used, no constructor, etc... a simpler functional component will do the job and allow you to destructure the props right in the function signature (you can even do this with the array::map callback).

const Mesas = ({ mesas }) => (
 <div>
 {mesas.map(({ id }) => (
 <div key={id}>
 <text>{id}</text>
 </div>
 })}
 </div>
);

• Matheus Martins: Thank you very much for the explanation, it helped me a lot

Answer 2

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 = () => {
 return (<ListaMesas mesas = {mesas} />)
}

// Mesas.js
import React from 'react';
export const mesas = ({ mesas }) => {
 const mesasList = mesas.map((mesa) => {
 <div key={mesa.id}>
 <text>{mesa.id}</text>
 </div>
 })
 return (
 <div>
 {mesasList}
 </div>
 )
}

• Matheus Martins: Thanks for the explanation, this will be very useful