Reload page onSubmit in React.js

I want my React.js page to reload after hitting the submit button. This is because I put new entries into my database and once submitting was successful, I want to request new data from the database and display them.

import React, {useEffect, useState} from 'react';
import axios from "axios";

const Questionnaire = () => {
    const [questions, setQuestions] = useState({questions: []});
    const [updated, setUpdated] = useState(false); // approach 1
    // let updated = false // approach 2

    const onSubmit = async (answeredQuestions) => {
        let data = Object.values(answeredQuestions)
        
        axios.put('http://localhost:8000/questionnaire/', data)
            .then(response => {
                // setUpdated(false); // approach 1
                // updated = !updated; // approach 2
            }
        );
    };

    useEffect( () => {
        axios.get('http://localhost:8000/questionnaire/', {})
            .then((response) => {
                setQuestions({"questions": response.data});
                setUpdated(true); // approach 1
            });
    }, [updated]);

    return (
        <> 
            <Questions questions={questions} onSubmit={onSubmit} />
        </>
    );
}

export default Questionnaire;

I want the useEffect() to be executed immediately after getting the response from axios.put() so that the new questions can be requested and displayed to the user.
I tried out two approaches, but either axios.get() was executed twice or the re-render didn’t work properly.

I appreciate your support!

Can’t use Material UI in external library with webpack/rollup/react

I’m working on a component library that wraps some of the MaterialUI components and implements others to be used in a larger project. While setting up the library I had to setup webpack in order to be able to import and bundle images and css files in my library.

This library is located nested in the folder of the main project, where I add it as a dependency with npm i ./shared/path_to_library. this seems to work fine, since the typescript is working correctly and the npm start gives me no error. Then when I open it in a browser I get the following error page:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But this error only occurs if I try to use any component from @mui/material inside my library. Exporting handmade components and using them in the main project works fine, but using any material component wrapped by my own component and then using it in the project brings me to this error. I also tried to move from webpack to rollup but I ended up getting the same problem.

Here are my config files for webpack and rollup:

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

const pkg = require("./package.json");

const config = [
  {
    input: "src/index.ts",
    output: [
      { file: pkg.main, format: "cjs", sourcemap: true },
      { file: pkg.module, format: "esm", sourcemap: true },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
    ],
  },
  {
    input: "lib/esm/types/index.d.ts",
    output: [{ file: "lib/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

export default config;

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "lib"),
    filename: "[name].js",
    libraryTarget: "umd",
    library: "my-core-library",
    umdNamedDefine: true,
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /.css?$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: /.tsx?$/,
        use: ["babel-loader", "ts-loader"],
        exclude: /node_modules/,
      },
      {
        test: /.(png|jpe?g|gif|svg)$/,
        use: ["file-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  externals: [
    {
      react: "react",
      "react-dom": "react-dom",
      "@mui/material": "@mui/material",
      "@emotion/react": "@emotion/react",
      "@emotion/styled": "@emotion/styled",
      "@mui/lab": "@mui/lab",
    },
  ],
};

I’m running out of ideas 🙁

ESLint with Airbnb style guide does not work for all rules

Recently I started checking all various JavaScript style guides and I liked Airbnb the best.

However, when I configured ESLint with Airbnb style guide, I noticed that some rules defined in their docs are not checked at all. For example:

  1. Group all your consts and then group all your lets.
  2. Use shortcuts for booleans, but explicit comparisons for strings and numbers.
  3. Use // for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment unless it’s on the first line of a block.

So, if you take this code as an example:

const array = [1, 2, 3, 4, 5];
let foo = 'foo';
const bar = 'bar';

if (array.length) {
  console.log('Foo:', foo);
  // Changing foo
  foo = 'baz';
}

The linter should throw 3 errors:

  1. I didn’t group all consts and then all lets, I defined them sequentially.
  2. I didn’t use explicit comparation in if statement – array.length > 0
  3. I didn’t add new line before my comment

However, linter does not throw any error. Does that mean that eslint-config-airbnb-base does not include all rules that Airbnb style guide suggests?

How do you reset Vimeo embed playback on hover?

I’m trying to figure out how to replay the Vimeo video each time you hover over the box. But the problem is that it just plays all the way when you hover the first time.

It looks like it may be possible to do this with Froogaloop, but I’m not sure how to implement it in the current javascript code.

Is there a way to restart the video each time on hover?

Here’s what I have so far. Any help would be awesome!

HTML

<section class="full video-downloads gray-bg">
    <div class="video-downloads-wrapper" video-rollover="1">
        <div class="video-item">
            <div class="download-wrap video-rollover black-bg" data-video="642263700">
            <p style="color:#ffffff;display:grid;justify-content:center;align-items:center;width:100%;">rollover this</p>
            </div>
        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/froogaloop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

CSS

.video-item .download-wrap a{
          display: flex;
        }
        .video-item img{
          max-width: 100%;
          height: 305px;
          object-fit: contain;
          width: 100%;
          border: 1px solid #424242;
        }
        .video-item .video-rollover i span{
          font-family: myriad-pro, sans-serif;
          font-size: 12px;
          text-transform: uppercase;
          margin-top: 10px;
        }
        .video-item .video-rollover{
          position: relative;
          margin-bottom: 10px;
          display: flex;
          cursor: pointer;
          width:350px;
          height:350px;
          background: black;
        }
        .video-reveal {
          position: fixed;
          width: 350px;
          height: 200px;
          top: 0;
          left: 0;
          pointer-events: none;
          opacity: 0;
          background: #000000;
          border: 1px solid #424242;
        }
        .video-reveal-clip iframe{
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .video-reveal-inner,
        .video-reveal-clip {
          width: 100%;
          height: 100%;
          position: relative;
        }
        .video-downloads-wrapper{
          color: #ffffff;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(241px,1fr));
          gap: 20px;
        }

JS

{ // Video Rollover Function
    const mapNumber = (X,A,B,C,D) => (X-A)*(D-C)/(B-A)+C;
    // from http://www.quirksmode.org/js/events_properties.html#position
    const getMousePos = (e) => {
        let posx = 0;
        let posy = 0;
        if (!e) e = window.event;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        return { x : posx, y : posy }
    }
    // Generate a random float.
    const getRandomFloat = (min, max) => (Math.random() * (max - min) + min).toFixed(2);

    // Plug in video id into iframe
    class videoHover {
        constructor(el) {
            this.DOM = {el: el};
            this.DOM.reveal = document.createElement('div');
            this.DOM.reveal.className = 'video-reveal';
            this.DOM.reveal.innerHTML = `
                <div class="video-reveal-inner">
                    <div class="video-reveal-clip">
                    <iframe id="${this.DOM.el.dataset.video}" class="video-iframe" src="https://player.vimeo.com/video/${this.DOM.el.dataset.video}?h=53a1e27e93&amp;badge=0&amp;autopause=0&amp;autoplay=1&amp;loop=1&amp;muted=1" width="1080" height="1350" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" title="video-test"></iframe>
                    </div>
                </div>`;
            this.DOM.el.appendChild(this.DOM.reveal);
            this.DOM.revealInner = this.DOM.reveal.querySelector('.video-reveal-inner');
            this.DOM.revealInner.style.overflow = 'hidden';
            this.DOM.revealVideo = this.DOM.revealInner.querySelector('.video-reveal-clip');
            this.initEvents();
        }
        initEvents() {
            this.positionElement = (ev) => {
                const mousePos = getMousePos(ev);
                const docScrolls = {
                    left : document.body.scrollLeft + document.documentElement.scrollLeft, 
                    top : document.body.scrollTop + document.documentElement.scrollTop
                };
                this.DOM.reveal.style.top = `${mousePos.y+20-docScrolls.top}px`;
                this.DOM.reveal.style.left = `${mousePos.x+20-docScrolls.left}px`;
            };
            this.mouseenterFn = (ev) => {
                this.positionElement(ev);
                this.showVideo();
            };
            this.mousemoveFn = ev => requestAnimationFrame(() => {
                this.positionElement(ev);
            });
            this.mouseleaveFn = () => {
                this.hideVideo();
            };
            
            this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
            this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
            this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
        }
        showVideo() {
            TweenMax.killTweensOf(this.DOM.revealInner);
            TweenMax.killTweensOf(this.DOM.revealVideo);

            this.tl = new TimelineMax({
                onStart: () => {
                    this.DOM.reveal.style.opacity = 1;
                    TweenMax.set(this.DOM.el, {zIndex: 1000});
                }
            })
            .add('begin')
            .add(new TweenMax(this.DOM.revealInner, 0.2, {
                ease: Sine.easeOut,
                startAt: {x: '-100%'},
                x: '0%'
            }), 'begin')
            .add(new TweenMax(this.DOM.revealVideo, 0.2, {
                ease: Sine.easeOut,
                startAt: {x: '100%'},
                x: '0%'
            }), 'begin');
        }
        hideVideo() {
            TweenMax.killTweensOf(this.DOM.revealInner);
            TweenMax.killTweensOf(this.DOM.revealVideo);

            this.tl = new TimelineMax({
                onStart: () => {
                    TweenMax.set(this.DOM.el, {zIndex: 999});
                },
                onComplete: () => {
                    TweenMax.set(this.DOM.el, {zIndex: ''});
                    TweenMax.set(this.DOM.reveal, {opacity: 0});
                }
            })
            .add('begin')
            .add(new TweenMax(this.DOM.revealInner, 0.2, {
                ease: Sine.easeOut,
                x: '100%'
            }), 'begin')
            
            .add(new TweenMax(this.DOM.revealVideo, 0.2, {
                ease: Sine.easeOut,
                x: '-100%'
            }), 'begin');
        }
    }

    // Attach video to cursor on hover
    [...document.querySelectorAll('[video-rollover="1"] .video-rollover, a[video-rollover="1"]')].forEach(link => new videoHover(link));

}

LINK TO CODEPEN
https://codepen.io/tampham/pen/ExwaJWX

Why isn’t pushed() array being shown in console? [duplicate]

I am adding a String and an array to an already created array myArray using push(). However, when I print the updated myArray in the console after pushing(), I only see the String added to myArray, not the added array, in myArray‘s content. (The content is seen when I press the little carrot next to the myArray array in the console.) The added array isn’t being taken account in the length of the updated myArray either. Why is this?

Note: The added array isn’t shown to be in the updated myArray, but when I pop() the last element from the updated myArray, the array that was added (the one of interest) is returned. So it seems to be stored in myArray but not technically?? What is going on?

My code:

var myArray = [1, 2, 3];
myArray.push('Jacob', ['Brandy', 2]);
console.log(myArray);

var removedValue = myArray.pop();
console.log(removedValue);

Current Output:

Array(5) [ 1, 2, 3, "Jacob", (2) […] ]
    0: 1
    1: 2
    2: 3
    3: "Jacob"
    length: 4
    <prototype>: Array []

Expect:

Array(5) [ 1, 2, 3, "Jacob", (2) […] ]
    0: 1
    1: 2
    2: 3
    3: "Jacob"
    4: ["Brandy", 2]
    length: 5
    <prototype>: Array []

Remove element if Safari/iOS

I am creating a website where I have created a fullscreen button, which can be kind of useful on mobile – at least for my website. This is done through some Javascript. However, if I’m not mistaken, this fullscreen mode does not work in Safari (or maybe just iOS in general). So basically, I would like to remove the button in those cases, since it doesn’t work for them.

Can this be accomplished with CSS, or do I need some Javascript as well ?

NextJS i18n – Locale getting undefined

I’m trying to migrate my website to NextJS, and I’m having trouble to do some internationalization.

I’m following the tutorial from Documentation itself, but my locale in the inspector is coming up as undefined.

What i’m doing wrong?
I’m using the latest version of nextJS.

Im trying to get some info from console.log.

console.log("Locale: " + locale);
console.log(router);

and it prints:
enter image description here

next.config.js

module.exports = {
    i18n: {
        locales: ['en-US', 'pt-BR'],
        defaultLocale: 'pt-BR',
    },
}

/pages/index.js

import Head from 'next/head'
import { useRouter } from 'next/router'

import pt from '../locale/index/pt'
import en from '../locale/index/en'

export default function Home() {

    const router = useRouter();
    const { locale } = router;
    const t = locale === 'pt' ? pt : en;

    return (
        <div className="container">
            <Head>
                <title>{t.title}</title>
            </Head>
        </div>
    )
}

/locale/pt.js

export default {
    title: "Teste Portugues."
}

/locale/en.js

export default {
    title: "Test English"
}

Some random info:
NextJS Version: 12.0.4
Chrome Version: 96.0.4664.55
Node Version: 17.0.1

Ethers decode/get information about collection and token from Etherscan transaction

I am using Ethers and I am listening to Open Sea contract to get latest sales. The problem that I know how to get transaction hash, how to get price etc. but I do not know how can I get collection details and ID of the token that was sold. Is it even possible to get it? Where is it stored. I see something like this:

  args: [
    '0x0000000000000000000000000000000000000000000000000000000000000000',
    '0x57caab574ab5d945029c09beac5bfd9f39f669513c7d4dea0941a96c1017a80e',
    '0x1D6F2F0356B3DefAdf14b1a0F8A3Dcda89367D68',
    '0x78f0269f5b1Ca914c8c58993f41181f89e212B27',
    BigNumber { _hex: '0x1bc16d674ec80000', _isBigNumber: true },      
    '0x5c5321ae45550685308a405827575e3d6b4a84aa000000000000000000000000',
    buyHash: '0x0000000000000000000000000000000000000000000000000000000000000000',
    sellHash: '0x57caab574ab5d945029c09beac5bfd9f39f669513c7d4dea0941a96c1017a80e',
    maker: '0x1D6F2F0356B3DefAdf14b1a0F8A3Dcda89367D68',
    taker: '0x78f0269f5b1Ca914c8c58993f41181f89e212B27',
    price: BigNumber { _hex: '0x1bc16d674ec80000', _isBigNumber: true },
    metadata: '0x5c5321ae45550685308a405827575e3d6b4a84aa000000000000000000000000'
  ]

I know I can get price from it. But where is information about collection or collection address or something? Is it stored in metadata? If yes how can I decode it?

I know that I can go to transaction like here – https://etherscan.io/tx/0xe29462cd6cd6cfcf2f05a3139de1aead4fc9e84d8966ad9a5227b996eb90c33d but I want to get it from contract listener in ethers.

Redirecting from nginx vs application (python bottle)?

we are currently doing a redirect from our app to another internal application. The redirect was written from the application level bottle and redirects to another UI using a dynamic ID. Are there are hard fast best practices for redirects? Does doing it at the application level vs NGINX level effects performance? Any first hand knowledge on which approach if any is more efficient/better? application level is what we currently have, and it works. Is there are valid benefit to take the time to redo it at the nginx level? Our Nginx Handles the URL from the application redirect. Diagram:
enter image description here

Set events inside viewrender callback

So i have this calender. You can see below. When the page is first loaded i populate the ‘events’ propertie of the calender which works fine. What i am having problem with is updateing the ‘events’ propertie inside the ‘viewrender’ eventcallback. Is that possible.

Iam using fullcalender version 3.9.

I tried inside the viewrender to set …. this.setevents. But it dont seem to work

    $("#request_calender").fullCalendar({
    eventOverlap: true,
    selectable: true,
    views: {
        listDay: {
            buttonText: 'Custom View',
        },
        agendaWeek: {
            columnFormat: 'ddd D/M'
        }
    },
    slotLabelFormat: 'H:mm',
    customButtons: {
        toggleWeekends: {
            text: 'show weekends',
            click: function() {
                toggleWeekends();
            },
        }
    },
    header: {
        left: "prev,next today toggleWeekends unBooked",
        center: "title",
        right: "agendaDay,agendaWeek,month,listWeek"
    },
    weekends: false,
    weekNumbers: true,
    defaultView: 'agendaWeek',
    select: function(startDate, endDate) {
        start_date = startDate.format();
        end_date = endDate.format();
        new_request(start_date, end_date);
    },
    events: calender_array,
    timeFormat: 'H(:mm)',
    eventRender: function(e, t) {
      //some code here
    },
    eventClick: function(event, jsEvent, view) {
        console.log("event:", event);
        request_id = event['request_id'];
        request_details(request_id);
    },
    viewRender: function(view, element) {
        //HERE I WANT TO GET DATA VIA A API AND PUSH TO EVENTS
        if (view.name == 'listDay') {
            showCustomView();
        }
    }
});

async waterfall and promise

I am using async waterfall to process nested condition in request, and using express framework. But I am confused how to process data to the next function in waterfall while the data is <promise>. This promise data is a query from sequalize.

Here is the sketch

exports.getanythinghere = async function() {

  var query = "SELECT anything, here "
            + "FROM anywhere WHERE ignore this query";

  return new Promise((resolve, reject) => {
    db.sequelize.query(query , {
      type: QueryTypes.SELECT    
    }).then(wth => {
      resolve(wth);
    })
  });

}


async.waterfall([
  function(callback) {
    const trying = getanythinghere (); 
    callback(null, trying); 
  },
  function(dataone, callbackt) {
    console.log("dataone is ", dataone); 
  }
], function(err, res) {
  if (err) return callback(err);
  callback(null, res);    
});//waterfall

There dataone is always dataone is Promise { <pending> }

What I am missing here. In jquery, I will do getanythinghere().done(function(){});

But I want to have it in this callback of waterfall.

I used to do this few years ago, but I forgot since too much with java and php

Any help please..

Redirect website between two specific dates using javascript

Hi everyone!

I’m in need of some help regarding redirecting my website during certain days each year. I want to be able to redirect my website from the current one (A) to the other one (B) between 1st of march to 15th of april. I can’t find any way to do this without making a wierd cluster of websites that loads and redirect the user back and forth to multiple pages. I tried to add certain code in the script and such but no success. I’m trying also to not include a specific year only the dates so it runs same dates each year without modification. The code I use today for the season is:

<script>var date=new Date();
if(date.getMonth()==3){
  window.location="https://www.MYWEBSITE.com/site_B.html"}</script>

wich only redirects the full months of april wich is’nt optimal at all. All ideas are welcome and I appreciate all help 🙂

MP4 in Material Box refuse to have a small height and fit the Box please advice

I learn JavaScript React and now I have problem with positioning of an MP4 movie.
I have a Codesandbox
I want it fit the Box in portrait with let’s say height: '20vw and landscape but whatever I try I can’t get it to look good.

Like this, here the movie should be just a 4th of the height and not this mega high.

Whatever I try this height cant be reduced please advice?

enter image description here

TypeError: Cannot read properties of undefined (reading ‘setPopup’)

I’m trying to create my project in React. This part of the project consists in a list of item, each one has a button X to delete that item. Every single item, is a component of my react app. When the button is pressed, i set a variable (passed throught the useContext) called setPopup, so a popup appears, asking if you are sure you want to delete the file. The proble is that when I click the file, this error occurs:

TypeError: Cannot read properties of undefined (reading 'setPopup')

This is the code of the component:

import '../styles/styleF.css';
import {PopupContest} from './HomePage';
import { useContext } from 'react';

const SFile = (n) => {
    const v = useContext(PopupContest);
    let currentImg = c;
    return <> 
        <div className="fileSingle">
            <img src={currentImg} alt="img" style={{'height':'50px', 'width':'50px','position':'relative', 'top':'5', 'left':'0'}} />
            <h3>{n.name + "." + n.img}</h3>
            <button style={{'height':'50%', 'marginTop':'10px'}} onClick={() => {v.setPopup(6); v.setSelectFile(n.ident + "")}}>X</button>
        </div>
    </>
}

export default SFile;

I would like to knwo why this is happening, and how to fix it correctly. The code that effectively delete the file is in other file and component, and works. I read in some answers that I should check if it is undefined, but to make the check condition, the code breaks anyway. So, I don’t know how to manage it. Can someone help? Thank you so much

React route how to get to the page i want

So, i have a code that is using react-route, and i have a few pages, but when i get to one of them, i can’t enter the others, since the URL gets stuck in the actual page, is there any way to solve this? When i go from the app page, to the CheckOut page, my url gets like this: localhost:3000/CheckOut, and when i try to move to the Comprar page, its gets like this: localhost:3000/CheckOut/Comprar, which is not working, and when i manually write the url like this: localhost:3000/Comprar, it do work, i want to know how can i get to the Checkout page, and then go to the Comprar page, and the URL should look like this: localhost:3000/Comprar.

App.js:

import './styles/App.css';
import React, {useState} from "react"
import DefineDestino from './components/DefineDestino';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import CheckOut from './pages/CheckOut';
import Comprar from './pages/Comprar';

function App() {
  const [estadoOrigem, setEstadoOrigem] = useState()
  const [estadoDestino, setEstadoDestino] = useState()
  return (
      <Router>
        <div className="App">
          <div className="mainContent">
            <h1>Escolha um destino.</h1>
              <div className="estados">
                <h1>Local de Origem</h1>
                <select value={estadoOrigem} onChange={e => setEstadoOrigem(e.target.value)}>
                    <option>Rio de Janeiro</option>
                    <option>São Paulo</option>
                    <option>Minas Gerais</option>
                    <option>Brasília</option>
                    <option>Pará</option>
                    <option>Ceará</option>
                    <option>Paraná</option>
                    <option>Mato Grosso</option>
                </select>
            </div>
            <div className="estados">
              <h1>Destino Final</h1>
              <select className="select" value={estadoDestino} onChange={e => setEstadoDestino(e.target.value)}>
                  <option>Rio de Janeiro</option>
                  <option>São Paulo</option>
                  <option>Minas Gerais</option>
                  <option>Brasília</option>
                  <option>Pará</option>
                  <option>Ceará</option>
                  <option>Paraná</option>
                  <option>Mato Grosso</option>
              </select>
          </div>
              < DefineDestino origem={estadoOrigem} destino={estadoDestino}></DefineDestino>
              <Routes>
                <Route path="/CheckOut" element={<CheckOut />}></Route>
                <Route path="/Comprar" element={<Comprar />}></Route>
              </Routes>
          </div>
        </div>
      </Router>
    );
}

DefineDestino.js:

import React, {useState} from "react"
import { Link } from "react-router-dom";
import '../styles/DefineDestino.css'

export default function DefineDestino(props) {
    const [initialValue, setValue] = useState(0)
    const dados = {
        locais: [
            {
                estado: 'Rio de Janeiro', 
                aeroportos: 'Santos Dumont', 
                valor: 3000
            },
            {
                estado: 'São Paulo',
                aeroportos: 'Aeroporto Internacional de São Paulo-Guarulhos', 
                valor: 2500
            },
            {
                estado: 'Pará',
                aeroportos: 'Aeroporto Internacional de Belém', 
                valor: 1500
            },
            {
                estado: 'Minas Gerais',
                aeroportos: 'Aeroporto Internacional de Belo Horizonte-Confins', 
                valor: 1750
            },
            {
                estado: 'Brasília',
                aeroportos: 'Aeroporto Internacional de Brasília', 
                valor: 1600
            },
            {
                estado: 'Mato Grosso',
                aeroportos: 'Aeroporto Internacional de Cuiabá', 
                valor: 1350
            },
            {
                estado: 'Paraná',
                aeroportos: 'Aeroporto Internacional de Curitiba', 
                valor: 1200
            },
            {
                estado: 'Ceará',
                aeroportos: 'Aeroporto Internacional de Fortaleza', 
                valor: 1200
            }
        ]
    }
    
    var local = props.destino

    const increment = () => {
        return {
            type:'increment'
        }
    }

    function estadosReducer(state, action) {
        if (action.type === 'increment') {
            var item
            for (item of dados.locais) {
                if (item.estado === local) {
                    switch(local) {
                        case 'Rio de Janeiro':
                            setValue(initialValue + item.valor)
                            break
                        case 'São Paulo':
                            setValue(initialValue + item.valor)
                            break
                        case 'Pará':
                            setValue(initialValue + item.valor)
                            break
                        case 'Minas Gerais':
                            setValue(initialValue + item.valor)
                            break
                        case 'Brasília':
                            setValue(initialValue + item.valor)
                            break
                        case 'Mato Grosso':
                            setValue(initialValue + item.valor)
                            break
                        case 'Paraná':
                            setValue(initialValue + item.valor)
                            break
                        case 'Ceará':
                            setValue(initialValue + item.valor)
                            break
                    }
                }
            }
        }
    }

    return(
        <div>
            <h1>De: {props.origem}</h1>
            <h1>Para: {props.destino}</h1>
            <h1>Valor: {initialValue}</h1>
            <button onClick={() => estadosReducer(initialValue, increment())}><Link to={"CheckOut"}>Realizar Checkout</Link></button>
        </div>
    )
}

CheckOut.js:

import '../styles/App.css';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Comprar from './Comprar';

function CheckOut(props) {
  return (
      <div className="CheckOut">
          <h1>Efetuar compra?</h1>
          <button><Link to={"Comprar"}>Comprar passagem</Link></button>
      </div>
  );
}

export default CheckOut;

CheckOut.js:

import '../styles/App.css';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Comprar from './Comprar';

function CheckOut(props) {
  return (
      <div className="CheckOut">
          <h1>Efetuar compra?</h1>
          <button><Link to={"Comprar"}>Comprar passagem</Link></button>
      </div>
  );
}

export default CheckOut;

Comprar.js:

import '../styles/App.css';

function Comprar(props) {
  return (
    <div className="Compra">
        <h1>Compra efetuada! Boa viagem :)</h1>
    </div>
  );
}

export default Comprar;