score:1
Accepted answer
You can achieve it by this:-
import React from 'react'
export default class YourComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
totalPrice: 0
}
}
handleChange(ev){
let totalPrice = ev.target.value * 10 // your number here i have taken 10 for example
this.setState({totalPrice:totalPrice})
}
render() {
return (
<div>
<input type="number" onChange={this.handleChange.bind(this)}/>
<span>Total Price: {this.state.totalPrice}</span>
</div>
)
}
}
Source: stackoverflow.com
Related Query
- How can i store the value of a React input element and use it in some other elements
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- How can I get the value of an input field and use it in URL in React
- How can I get the value of an element onClick in React and use it as condition
- How can I pass a value from the backend to a React frontend and use that value in the CSS for the frontend?
- How to use React context on search input and share the input with other components?
- How can I take the value of an Input and store it in another component?
- How can mock the value of a state and data in my react test
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to use currying to create HoC in React and connect to the Redux store at the same time?
- How to use the updated value in redux store immediately after the action is dispatched in react js functional components
- How can the value go from the Child element to the sister Element in React | JSX
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- React Typescript: How run some lines at the same time as each other, and other parts need to wait
- How do I store the JSON response such that I can use it in other functions (React & JS)?
- In React with Formik how can I build a search bar that will detect input value to render the buttons?
- how can i stop this counter and put the final value in databases using react js axios
- How can I create a counter as components to use multiple times and create one button to reset all the counter in React JS?
- How can I store all the dynamic values and attribute labels in a state in react js
- React - How to use the current state value as a variable so i can set as a index inside an array
- How can i restrict user from not selecting other file types using input type file with react and typescript?
- how to capture the file of an input element so that I can pass it as an argument to another function in react
- How can I take a value from an input tag in a TSX component, and use that value in a Node JS file in a different directory?
- How to split and export the mysql code into other file and can be use anywhere in Reactjs
- How can I add a checkbox to each element in the list and to be able to control it through state in my react app?
- How can I change form input value in React and Redux?
- How to get the value of redux store in other components on typescript react hooks project
- How can we compare each element array and show the element based on the value
- How can I use React context to get the router exactly and only where I need it?
- How to store and pass the user input value using <button> tag in React.js?
More Query from same tag
- PHP, React, MySQL database contact form error
- React App - Page unresponsive
- Can't perform a React state update on an unmounted component with setInterval
- WebSocket SocketIO connection not working with NestJS server on Heroku and react client on Vercel
- React Native: Lottie Animations flicker on Android, but not iOS
- Trying to upload an image using MERN getting 400 bad request error
- Proper way of submitting parameters to parents in react
- Set background image for one component differently in ReactJS
- On Docusaurus, how do I disable the external link SVG?
- Passing arguments to action
- Spread operator issue: {...someObject, someField: "someValue"} being treated as a function?
- Cannot find module React require
- Creating a function to sort table React, JSX
- How do I change colour of inbuilt toolbar icons in tinymce editor(v 5.1.2)
- Dropdown list of names in ReactJS
- How to prevent a route from registering before jwt verifies react
- location.pathname vs router
- Support callback for changing another field value when using React Hook Form validation
- Comparing all the objects in json
- React Best Practice: logic vs functions in JSX
- Fetch data and set the state. Then make the data available to the app using the context api
- build failed: exit code 127
- React - Eslint - Camel camel case props
- Trigger onClick event of button on dynamically generated html in ReactJS
- How to prevent svg on top of other div of triggering mouseleave
- getting blank web page using component | ReactJS
- Issue with Static HTML Export in NextJS
- Cannot read property 'token' of undefined in Reactjs
- Parse componentDidMount values in render with state
- How to add a value to an object inside a array of files?