[React] .map is not a function

Comecei a praticar React faz algumas semanas e estou desenvolvendo uma aplicação simples de um e-commerce, mas quando faço a lógica dos filtros alguma coisa acontece e meu array fica vazio, resultando no erro pacotesDasViagens.map is not a function. No console a const pacotesDasViagens aparece como

ƒ () {}
<constructor>: "Function"
name: "Function"


Segue o código

import React from "react";
import Filter from "./components/Filtros/filter.js";
import { Produtos } from "./components/Produtos/Produtos";

const pacotes = [
{
id: 1,
nome: 'Viagem a Lua',
preco: 45000,
quantidade: 3,
foto: 'https://picsum.photos/200/200?a=4'
},
{
id: 2,
nome: 'Viagem a Terra',
preco: 1000,
quantidade: 3,
foto: 'https://picsum.photos/200/200?a=4'
},
{
id: 3,
nome: 'Viagem ao Sol',
preco: 2800,
quantidade: 3,
foto: 'https://picsum.photos/200/200?a=4'
},
{
id: 4,
nome: 'Viagem a Lua',
preco: 34000,
quantidade: 3,
foto: 'https://picsum.photos/200/200?a=5'
},
{
id: 5,
nome: 'Viagem a Plutão',
preco: 67000,
quantidade: 3,
foto: 'https://picsum.photos/200/200?a=4'
}
]

class App extends React.Component {
state = {
filtraMax: "",
filtraMin: "",
filtraNome: "",
carrinho: []
};

onChangeFiltraMin = (event) => {
this.setState({ filtraMin: event.target.value });
};

onChangeFiltraMax = (event) => {
this.setState({ filtraMax: event.target.value });
};

onChangeFiltraNome = (event) => {
this.setState({ filtraNome: event.target.value });
};

render() {
console.log(pacotes)
return (
<div>
<Filter
onChangeFiltraMax={this.state.onChangeFiltraMax}
onChangeFiltraMin={this.state.onChangeFiltraMin}
onChangeFiltraNome={this.state.onChangeFiltraNome}
/>
<Produtos
products={pacotes}/>
</div>
);
}
}

export default App;



import React from "react";
import styled from "styled-components";

const ContainerFiltros = styled.div`
border: 1px solid black;
padding: 8px;
`;

const ContainerInput = styled.label`
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 8px;
`;

export class Filter extends React.Component {
render() {
return (
<ContainerFiltros>
<h3>Filtros</h3>
<ContainerInput>
<p>Valor Mínimo:</p>
<input
type="number"
name={"valor mínimo"}
onChange={this.props.onChangeFiltraMin}
value={this.props.filtraMin}
/>
<p>Valor Máximo:</p>
<input
type="number"
name={"valor máximo"}
onChange={this.props.onChangeFiltraMax}
value={this.props.filtraMax}
/>
<p>Busca por nome:</p>
<input
name={"busca por nome"}
onChange={this.props.onChangeFiltraNome}
value={this.props.filtraNome}
/>
</ContainerInput>
</ContainerFiltros>
);
}
}

export default Filter;



import React from "react";
import styled from "styled-components";
import { CardDeProdutos } from "./CardDeProdutos.js"

const ContainerPacotes = styled.div``;
const HeaderPacotes = styled.div``;


export class Produtos extends React.Component {
state = {
sorting: "nome",
order: 1
};

updateSorting = (event) => {
this.setState({ sorting: event.target.value });
};

updateOrder = (event) => {
this.setState({ order: event.target.value });
};

filtraPacotes = () => {
return this.props.pacotes
.filter((pacotes) => {
return pacotes.name
.toLowerCase()
.includes(this.state.filtraNome.toLowerCase());
})
.filter((pacotes) => {
return (
this.state.filtraMin === "" || pacotes.preco >= this.state.filtraMin
);
})
.filter((pacotes) => {
return (
this.state.filtraMax === "" || pacotes.preco <= this.state.filtraMax
);
})
.sort((pacoteAtual, pacoteSeguinte) => {
switch (this.state.sorting) {
case "nome":
return (
this.state.order *
pacoteAtual.nome.localeCompare(pacoteSeguinte.nome)
);
case "quantidade":
return (
this.state.order *
(pacoteAtual.quantidade - pacoteSeguinte.quantidade)
);
default:
return (
this.state.order * (pacoteAtual.preco - pacoteSeguinte.preco)
);
}
}
)
}

render() {

const pacotesDasViagens = this.filtraPacotes
return (
<ContainerPacotes>
<HeaderPacotes>
<p>Quantidade de Pacotes: {pacotesDasViagens.lenght}</p>
<span>
<label for="sorting">Ordenação</label>
<select
name="sort"
value={this.state.sorting}
onChange={this.updateSorting}
>
<option value="nome">Nome</option>
<option value="preco">Preço</option>
<option value="quantidade">Quantidade</option>
</select>
</span>

<label for="sorting">Ordem</label>
<select
name="sort"
value={this.state.order}
onChange={this.updateOrder}
>
<option value={1}>Crescente</option>
<option value={-1}>Decrescente</option>
</select>
</HeaderPacotes>
<div>
{pacotesDasViagens.map((product) => {
return <CardDeProdutos
product={product}
onAddProductToCart={this.props.onAddProductToCart}
/>
})}
{pacotesDasViagens.map((pacotesCard => {
return <CardDeProdutos
produto={pacotesCard}
/>
}))}
</div>
</ContainerPacotes>
);
}
}
export default Produtos;

Continue reading...