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

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet. ...

htmlcssreactjsflexbox

Magnify novice mistakes: Unhandled promise rejection and Ensure every child has a distinct "key" property

Currently, I am working through Amazon's Getting Started with AWS tutorial found here: https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-four/ After successfully building and hosting the app on git, I noticed that ...

javascriptreactjsaws-amplify

Challenges with handling Ajax responses in Ruby on Rails

I'm currently facing an issue with the Ajax response in my Rails application, and I'm unsure of how to troubleshoot it. Here is the code that is functioning correctly: View <div id="<%= dom_id(comment) %>_count"> <%= Like.wh ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Developing an uncomplicated Angular promise following the invocation of a service

Delving into the realm of Angular promises for the first time, I'm determined to grasp its concepts. In my MainController, I have a simple authentication process using myAuthSrv.authUser with a username and password. Upon successful authentication (. ...

javascriptangularjsangularjs-scopeangular-promiseangular-services

Integrating the Avatar object into MUI card components

Can you help me figure out how to utilize an Avatar object in a Card mui? Here is the current code snippet I have: mycard = () => ( <Card> <CardHeader title="RamPriya" avatar="https://scontent.fmaa3-1......" /> </ ...

reactjsmaterial-ui

Personalizing the User Interface of Azure AD B2C using dynamic HTML

After customizing my own html and CSS for Azure AD B2C sign-up and sign-in policy using the steps outlined in this resource, I have successfully created custom Sign-Up and Sign-In pages. However, my next goal is to make the sign-up page dynamic by passing ...

htmlcssazureazure-ad-b2c

updating dropdown options based on user input with PHP

I need help with implementing a code for two dropdown boxes. The first dropdown should display main category values dynamically, and when a value is selected, the second dropdown should appear with corresponding sub-category values. How can I achieve this ...

javascriptphpjqueryhtmlajax

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. Here is an example ...

javascriptcssreactjsmaterial-uinext.js

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

Encountering AngularJS promise data parsing issues

I am trying to work with promises in AngularJS. However, I encountered an error while parsing the backend response in AngularJS. What could be the issue here? This is the HTML code: <div ng-app="clinang" ng-controller="pacientesCtrl"> <a ...

javascriptangularjsjson

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. HTML <div class='tab ...

htmlcssangular

The Bootstrap navigation bar isn't displaying properly on mobile devices

Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...

htmlcssbootstrap-4

Increase the font size of a div using CSS to make it appear larger

Utilizing a WYSIWYG-editor, I am creating content that I want to display with double font-size, without directly altering the HTML code. Here is an example of the HTML structure: <div id="contents"> <p style="text-align:center"> <spa ...

htmlcssfont-size

What is the process of integrating Formik with Chakra using typescript?

I'm attempting to implement the following Chakra example in Typescript. <Formik initialValues={{ name: "Sasuke" }} onSubmit={(values, actions) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); actio ...

reactjstypescriptformikchakra-ui

Center Align Images in HTML List Items

Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know! My current ...

javascriptjqueryhtmlcss

Executing server side code using client data in next.jsIn next.js, executing server side code with data

Is there a way to extract metadata from a URL that is provided by the user in my Next.js application? To achieve this, I am utilizing a tool called metadata-scraper. However, upon submission of the form by the user, my application encounters an error: ...

javascriptreactjsnext.js

Struggling to implement .indexOf() in conjunction with .filter()

Hello, I'm new to JavaScript and ES6. Currently, I am working on a react-native app that utilizes Firebase and Redux. One of my action creators acts as a search bar function to fetch data from Firebase. Here's the code I have so far: export cons ...

javascriptecmascript-6indexof

What is the best way to modify a variable in a nested element using ng-click in the parent element?

Review this code snippet: <section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false"> <div class="page-content sub-content active-section">{{activeSection}} < ...

javascripthtmlangularjs

Accordionify your jQuery with integrated YouTube and Soundcloud embedding

Right now, I am in the process of creating a page dedicated to upcoming music releases. Each release will have its own preview embedded from YouTube or Soundcloud. My goal is to organize these embeds into accordion panels with automatic start/stop function ...

javascriptjqueryyoutubeaccordionsoundcloud

Using AngularJS client and Flask server for a RESTful call, one can include the

I am currently facing an issue where I need to send a REST request from my AngularJs client to a Flask server. The problem arises when one of the ids (key) in the request contains a forward slash. Interestingly, if the key does not contain a slash, the re ...

javascriptpythonangularjsrestflask