I want to make my code render the data when i search for a value, tried it by using for, but it keeps showing unexpected token. Is there any way to do it properly? It may be an easy question but i don't really know how to make this work.
export default function SelecionaRota() {
const rota = {
locais: [
{
nome: 'Rio de Janeiro',
rotas: [
{
nome: 'RJ-SP',
valor: 1200
},
{
nome: 'RJ-BSB',
valor: 1400
}
]
},
{
nome: 'São Paulo',
rotas: [
{
nome: 'SP-RJ',
valor: 1200
},
{
nome: 'SP-BSB',
valor: 1400
}
]
}
]
}
const location = useLocation()
const { estadoOrigem } = location.state
return (
<div>
<h1>{estadoOrigem}</h1>
{for (var i = 0;i < rota.locais.length;i++) {
if (estadoOrigem === rota.locais[i].nome) {
rota.locais[i].rotas.map(module => (
<>
<h1>{module.nome}</h1>
<h2>{module.valor}</h2>
</>
))
}
}}
</div>
)
}
Error:
./src/pages/Rota.js
SyntaxError: D:\Arquivos\1 Estágio Teste\aeroporto-teste\src\pages\Rota.js: Unexpected token (39:13)
37 | <div>
38 | <h1>{estadoOrigem}</h1>
> 39 | {for (var i = 0;i < rota.locais.length;i++) {
| ^
40 | if (estadoOrigem === rota.locais[i].nome) {
41 | rota.locais[i].rotas.map(module => (
42 | <>
First find the item from list, then use map over rotas
Update: Adding the missing return statement.
return (
<div>
<h1>{estadoOrigem}</h1>
{rota.locais
.find((item) => estadoOrigem === item.nome)
?.rotas.map((module) => {
return (
<>
<h1>{module.nome}</h1>
<h2>{module.valor}</h2>
</>
);
})}
</div>
);
you could do the 'filtering' or searching before the rendering.
const region = rota.locais.find(location => location.nome === estadoOrigem);
and then use the variable 'region' inside your return.
If you can have multiple regions, use:
const regions = rota.locais.filter(location => location.nome === estadoOrigem);
I've never needed to use a for loop in the jsx of a component. Generally you'll want to have a component that does whatever filtering you want done in the javascript piece and then loop through the remaining data.
So I'd do:
let locations = []
const filterLocations = () => {
for (var i = 0; i < rota.locais.length; i++){
if(estadoOrigem === rota.locais[i].nome){
locations.push(i);
}
}}
Then the jsx would just do:
locations.map((i) => (( i.doStuff ))
You always want to start with the least efficient way of doing things and then trying to refactor little by little instead of trying to figure out something clever right off the bat. Like instead of doing that for loop.
You could also use the javascript .filter() method to filter out whatever data you need and then push that to an array to map through.