score:1
this happens because in your onchange
method, you are changing inputfields
variable, where as your getlinks
method changes links
variable, which is being rendered on the screen.
if you want to set an initial value, and then allow the user to change it, change your input to :
<input classname="form-control" defaultvalue={link.name}
value={inputfields.name} type="text" name="name" placeholder="name" onchange={changehandler} />
likewise change for your other input, if you do not want the user to change the value later on, it's often better to add disable
in the input to avoid confusing people. 🙂
i know that this has been done so that you can create a minimal reproducible example for us, but i would have directly called setinputfields
in the axios.get
section to avoid this problem in the first place, however, if not possible, use the defaultvalue
and value
as i've shown above.
Source: stackoverflow.com
Related Query
- How to Change pre filled input values
- React-Admin: How to send input values that have been auto filled from an API call?
- React - how to pass multiple input values to child in on change event when values have different types (is not always e.target.value)?
- How to make input working for certain values only, is there any way to change value to desired one?
- How to change the available values of a <Select> on input from another <Select>
- How To Auto-Adjust Slider when Change Values in Input ? (Rc-Slider)
- How to change Input fields values in React?
- React - How to change input values inside loop when state change
- How to properly validate input values with React.JS?
- How to get values from input types using this.refs in reactjs?
- How can I test a change handler for a file-type input in React using Jest/Enzyme?
- How to change MUI input underline colour?
- How to change outline color of Material UI React input component?
- How to clear input values of dynamic form in react
- How to change responsive breakpoint values in MUI theme?
- Material UI | How to change the font colour of a disabled input text field?
- How to enable Ctrl + Z when you change an input text dynamically with React?
- How do I properly test input change events with Enzyme?
- react-admin - How to set input values based on another
- How to change default text in input type=“file” in reactjs?
- How to save my input values to text file with ReactJS?
- How to change input value in redux
- how is React able to suppress the change of the input field value?
- Don't refresh the input values on component change
- in redux-form, how to restrict the values of the input to a range?
- How to change Error color and underline color on input focus using material-ui v1.0.0-beta.40
- How to change the height of MUI Datepicker input box in React
- MUI Select | Change how the selected value display in Input
- How to pass multiple values in react through radio input
- How to clear multiple input values in React
More Query from same tag
- What do these different usages of ‘import’ represent?
- React and JSX: exchange two divs, if button is pressed
- Setting up Jest to test JSX files
- Javascript Math.random() returning very similar values
- How to import ReactJS Material UI using a CDN through Webpack's externals?
- Redux const { var1, var2 } = this.props;
- React createElement error "type is invalid -- expected a string got object"
- Why value from a Material-UI Button is not being passed to the onClick event handler?
- Button icons are making button names undefined
- Passing props from component to componet using react hooks
- imported component is not displayed
- only allowing numbers upto certain length in material ui
- How to pass input data to a function in React.js
- Form submission with redux-saga
- I have a component. But the onClick function isn't running
- How i can make a sorted table using react-semantic-ui and functional component?
- Choosing value from drop-down in DOM (Katalon Studio)
- How to add a key-value pair to state Object React
- Post request with strange behavior
- Reactjs managing stateful children
- React - activating a function onClick throws a 'Cannot read property' error
- Fetching remote data multiple times based on user choice within a page
- Animate the search list when typing on the searchbar (React)
- React Service Worker not reachable
- Passing props from child components to main
- How to avoid re-renders at the App level when I make a change to a child component (like a searchbar)?
- threejs/typesript - viewer object gets destroyed after rendering once
- In Gatsby starter blog, how to increase number of latest posts from 3 to 20 in home page
- React - Injecting inline style with animation
- textarea component with highlighted text in react js