score:3
Accepted answer
create some progress state and use the form's onsubmit
callback to update state and clear the input value. render the progress state into the h4
tag.
function app() {
const [progress, setprogress] = usestate(43); // <-- progress state
return (
<div>
<div classname="top-menu">
<div>
<h1>progress</h1>
</div>
</div>
<div classname="progress-container">
<h4>progress: {progress} %</h4> // <-- render progress state
<div classname="progress-bar"></div>
</div>
<div classname="inputs">
<label>progress (in %)</label>
<div classname="input">
<form onsubmit={e => { // <-- form submit callback
e.preventdefault(); // prevent default form action so page doesn't reload
const { value } = e.target.progress;
setprogress(value); // update state
e.target.progress.value = ''; // reset input value
}}>
<input id="progress" type="text" placeholder="e.g. 75"></input>
<button type="submit" classname="button">update</button> // <-- type = submit
</form>
</div>
</div>
</div>
);
}
Source: stackoverflow.com
Related Query
- How to get and output a value from the select tag
- Get object array from axios and using return value call another axios function and append the output to first result
- passing event to nested function in React and didn't get the outer event value
- Use params in react Link and get the value of it in another component?
- React: Get value of input[type=text] and output the value
- Get the input value in React hooks and print it
- How can I get the value of an input field and use it in URL in React
- react js filter through an array of objects and compare values within to get the closest value to a variable
- React event target value from jsx element does not get bind to state and json array (Type error cannot read the properties of undefined )
- Get the value by passing key to array of object in react and lodash
- Create a multilevel dropdown dynamically in React and get the value of selected submenu in dropdown
- How can I get the value of an element onClick in React and use it as condition
- Get the value of checkbox using ref in React
- Does react setState execute if the old and new value are the same?
- react - how do I get the size of a component child elements and reposition them
- How can mock the value of a state and data in my react test
- What is the real difference between value and defaultValue in React JS?
- mapping an array of objects and changing the value with on onClick in React
- How to get the first and last visible date in React Big Calendar?
- How can I get the value from an animated or interpolated value in React Native?
- React - Get the value of an input by clicking on a button
- How to properly make a GET call in React returning an observable (resembling the method in Angular and not using promises)?
- React native picker and console showing different value of the same state
- How to get the selected value from a radio button group in React where there are multiple groups?
- React - Why i assign scrollTop and the element don't get this?
- How can I get React styleguidist to install correctly and get past the peer Dependency issues with react-simple-code-editor: React 16 & 17?
- Need to get the last value of onChange for a slider React
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- Get value from input and use on the button
- How to display and handle dynamic checkoxes that are dependent on Task array value in the backend (Mongodb) in react js?
More Query from same tag
- React: Uncaught TypeError: this.state.data.map is not a function and
- Font is giving different output compared to figma
- React nested json
- Axios post with proxy on create-react-app hosting server doesn't work
- React Material-UI Autocomplete customize `no options` text
- Align Image and Text in Horizontal Direction in React
- Condition which is false appears and disappears when the page is refreshed
- JS serving and REST API from machine with changing IP address
- onSelectSlot doesn't work in Mobile react Big calendar
- AG Grid: cellRenderer disables value formatter
- Passing implementations of generic types to React component props
- React DND - canDrag depending on component state
- React CSS transitions doesn't work
- React JS - how do I loose focus on an element that was just clicked on?
- variables I defined in webpack.DefinePlugin is undefined
- Removing the last item of an array with filter won't re-render react component
- How to pass props while routing on click of Listitem of Material UI using v6
- How to pass props to .mapped elements with styled-components?
- Dynamically create React Routes Using Data From Component State
- Unsupported platform for fsevents@2.3.2 installation issue
- How to handle multiple Contexts using React Context API?
- how to control spectacle presentation with pure javascript?
- Syntax error from spread attribute
- custom-environment-variables.js cannot be read error in react application
- How can I make my docker container update on changes to my source files?
- Using asynchronous obtained ListItem components from the state of a React component in Material-UI List for React
- Uncaught TypeError: Cannot read property 'props' of undefined (reactjs) (very simpel)
- Is it possible to pass a component as a prop within an object using the spread operator?
- npm run build index.html creates blank page without errors/ warnings
- How to properly handle 'read' - 'unread' state for a chat messaging app?