What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold should trigger a price change. Currently, I am using hard-coded if statements to determine the selected options.

<div className="text-gray-500 mt-7">
  <select name="divisions" onChange={slbz2} id="listt" className="bg-gray-200 pr-14 pl-2 py-2">
    <option value="ironn">Iron</option>
    <option value="bronze">Bronze</option>
    <option value="silverr">Silver</option>
    <option value="goldd">Gold</option>
    <option value="platt">Platinum</option>
    <option value="diaa">Diamond</option>
  </select>
</div>
<div className="mt-5">
  <select name="divisions" onChange={slbz2} id="tierr" className="bg-gray-200 pr-12 pl-2 py-2">
    <option value="44">Division IV</option>
    <option value="33">Division III</option>
    <option value="22">Division II</option>
    <option value="11">Division I</option>
  </select>
</div>

and some conditions

For a demo, visit:

javascripthtmlcssreactjsnext.js

Answer №1

If you find yourself in these situations, the useEffect() function can be incredibly beneficial.
Check out -> ReactJS Documentation

Let's say we have state1 representing "Your Current Division" as a state variable.
and state2 representing "Your Desire League".

Be sure to include state1 and state2 in the dependency array of useEffect.

useEffect(() => {
    // Adjust your final state accordingly
}, [state1, state2]);

Update 1: Based on the details in your conditions screenshot, it appears you are not utilizing useState Please see Documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for removing the console warning message: "The use of enableRowSelect has been deprecated. Instead, please utilize rowSelection."

) I have integrated React Data Grid from https://adazzle.github.io/react-data-grid/ multiple times in my application. One thing I noticed is that there is a console warning related to a prop called "enableRowSelect" which indicates whether the prop is bein ...

javascriptreactjstypescriptreact-data-grid

Incorporating Image Caching Optimizations in CSS

My current dilemma I currently implement Cache Busting for my CSS files like this: echo "&lt;link href='stylesheet.css?" . filemtime('stylesheet.css') . "' />" My objective Now I want to achieve a similar approach for th ...

phpcsscache-controlfilemtime

Sending a JSON Object to an API endpoint using the $.ajax method

While attempting to extract data from a form by clicking a button and sending it to a web method in my code behind, I am aiming to pass it as a JSON object, following what seems to be the convention. Below is the current code snippet that I have, but unfor ...

javascriptjqueryajaxjson

Discovering the method to retrieve the value of an array in JavaScript

Currently, I am developing an Android application in Titanium Studio with a Rest API (Apigee Baas) as the backend. The data stored in the Apigee Baas includes fields such as name, address, and attendance records. When retrieving the response from the Rest ...

javascriptjsontitanium

What is the best way to locate and interact with a checkbox input element by its type and name in React testing library

I'm facing an issue with my HTML code: <label class="switch" value="true"> <input name="source" type="checkbox"/> </label> My problem is how to access the input with the name source. I&apo ...

reactjsreact-testing-library

Tips for implementing fluid transitions between mouse X and Y coordinates using JavaScript

I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here. Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay w ...

javascriptjquerycss

Concealing Components using Angular's ng-change Feature

I need help displaying or hiding an element in a form using ng-change or any other method you suggest. Here is the HTML snippet I am working with: <div ng-app ng-controller="Controller"> <select ng-model="myDropDown" ng-change="changeState( ...

javascripthtmlangularjs

Issue encountered while deploying on vercel: TypeError - Trying to access properties of undefined (specifically 'and')

Encountered this issue during deployment on Vercel. Npm run build did not show any errors. Configuration : "node": "18", "next": "^14.0.0", "next-transpile-modules": "^9.1.0", An error occurred d ...

javascriptnext.jsbuildvercelgsap

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS

Having trouble retrieving data from my API and encountering this error message. I suspect it may be related to the JSON structure. Interestingly, when using a different URL with nested arrays, it works fine. However, my current data is not cooperating. Any ...

javascriptjsonreactjsnext.js

Having trouble with JQuery Draggable in FireFox only working in an iFrame? Learn how to set the ViewPort to fix

Having trouble with jQuery UI Draggable in FireFox 33.0.2: I followed the example code, but it doesn't seem to be working. The scripts are running, CSS classes are added, event bindings are in place, but dragging won't work. I noticed that when ...

jquerycssviewportjquery-ui-draggable

React Express application malfunctioning when running in production environment

I have successfully developed a Create React App in both development mode using yarn start and yarn build > serve -s build. However, when I try to upload the build folder to my remote server (on Planet Hoster), I encounter the following errors : GET ht ...

reactjsexpressbuildcreate-react-app

Tips for sending props when a button is clicked in React

I am currently working on a project where I have a list of Events that are fetched using axios.get and then mapped to an Event component. The Event component contains a button that, when clicked, opens up a Registration Component. My challenge is figuring ...

reactjsreact-router

What's the best way to navigate across by simply pressing a button located nearby?

Hey there! I'm new to JavaScript and I'm working on a shopping list page for practice. In my code, I can add new items to the list, but what I really want is to be able to cross out an item when I click the "Done" button next to it, and then uncr ...

javascripthtmlcssdom

The issue of session type not updating in Next.js 14 with Next-auth 5 (or possibly version 4) is a common concern that needs to

Experimenting with new tools, I encountered an issue when trying to utilize the auth() function to access user data stored within it. TypeScript is indicating that the user does not exist in Session even though I have declared it. Here is my auth.ts file: ...

typescriptnext.jsnext-authnext.js14

Issue with card grid layout not displaying correct spacing. See sandbox for example

(adjust the output to trigger the md breakpoint and display cards in a row) Check out this link for reference. I'm attempting to add space between each card, but it doesn't seem to be working as expected. ...

reactjsmaterial-ui

Bug in Chrome causing issues with autofilling fields in AngularJS applications

Seeking a solution to address a bug noticed while utilizing a custom Angular directive in conjunction with Chrome's autofill feature. The directive is designed for a phone number field, automatically adding dashes "-" to enhance user experience by eli ...

javascriptangularjsgoogle-chrome

Is it possible to transfer a massive number of files using node.js?

I need to asynchronously copy a large number of files, about 25000 in total. I am currently using the library found at this link: https://github.com/stephenmathieson/node-cp. Below is the code snippet I am using: for(var i = 0; i < 25000; i++ ...

javascriptnode.js

Display images that have been uploaded on the page either as a grid view or a list of

In my Reactjs application, I am uploading multiple images to Azure Blob Storage. On a page, there is a button to open the upload form. Once the upload completes, I want to display all these images on the same page. Since the images have different aspect ...

javascripthtmlreactjs

The key to successful filtering in Next.js with Hasura is timing - it's always a step

I am fetching data from Hasura using useRecipe_Filter and passing the searchFilter state as a variable. It seems that every time I press a key, the UI updates with one keystroke delay before filtered data is passed to the results state. const SearchBar = ( ...

javascriptnext.jsgraphqlhasura

Error in Mongodb: Unable to convert value into ObjectId

Currently, I am attempting to retrieve only the posts belonging to users using the following code snippet: router.get("/:username", async (req, res) => { try { const user = await User.findOne({ username: req.params.username }); const ...

javascriptreactjsmongodbmongoose