score:-1
why do you have 'new state: ' in the setstate? the onchange function is called on every key press or change, so you shouldn't add your own text inside of the setstate function. if you wanna use es6, you can change the onchange call to:
(event) => this.handleinputchange(event.target.value)
and the handleinput function to:
handleinputchange(value) {
this.setstate({
text: value
})
}
if you need the 'new state: ' string before the input text then put it inside of a span before the input instead.
score:1
store the changed value, setstate()
is asynchronous.
handleinputchange(event) {
const myvalue = event.target.value;
this.setstate({
text: myvalue
})
}
score:6
because setstate
is asynchronous. but fortunately there is a callback parameter in the method call which you can use to get the value like this
this.setstate({
text: 'new state: ' + event.target.value
}, () => {
console.log(text)
})
btw you are not assigning anything to setstate
it's a method call.
besides that since events
are synthetic events in react you have to store the current target in a variable to not lose the event for example like this
const savevalue = event.target.value;
this.setstate({
text: 'new state: ' + savevalue
});
console.log(savevalue);
Source: stackoverflow.com
Related Query
- React - setState on input field not working
- Can't type in react Input Text Field - onChange not working properly
- setState not working properly when using value={} in input field
- Input field focus state in react not working with the given style
- React From Group input field is not working
- Cntrl S to submit a from in react JS but input field not working
- React setState not setting state of input field
- input pattern='[a-zA-Z]' is not working in React application
- React setState not working on first try, but works on second?
- readOnly is not applying for input field of KeyboardDatePicker of material ui in react js
- setState not working for updating an array in React
- setState not working in componentDidMount() - React
- Replace of setState callback in react hook with useEffect hooks for complicated scenario not working
- React - Why is input field still readonly (i.e. not editable) even though I've added onChange?
- React hook form - Register field not working
- React css webkit animation is not working after setState
- React setState hook not working with useEffect
- React form event.preventDefault() not working if handler calls setState on sibling component
- GlobalHotKeys(react-hotkeys) not working when focused on the input field
- React - Material UI - TextField controlled input with custom input component not working properly losing focus
- Input field not erasing React
- useState not working outside of input field (function based Reactjs)
- react setstate not working when pushing elements to array
- setState not working in React JS
- React firebase auth() setState not working inside then()
- React setState not working using event property
- React onChange not working for input inside functional component
- setState in react is not working in react component
- Input field value is not updating in react js
- Not allowing space in input field React
More Query from same tag
- "Match.Error" message : "Match error: Expected particular constructor"
- How to search and filter in array of objects on setState
- TypeError: Cannot read property 'experience' of null (reactJS)
- Unexpected token - React babel
- While compiling my react app I am getting Module build failed: SyntaxError: Unexpected token
- Finding the parameters that can be used in an external component's props in React
- React - Redux - Connect data fetched to Component
- Position a rectangle at the rightmost side of the container
- Warning: Failed prop type: The prop `exercise` is marked as required in `EditExercise`, but its value is `undefined`
- Typescript error - Unable to find react context in wrapped child component
- How to map over array of multiple types in TypeScript?
- useEffect hook runs infinitely when used in a custom hook
- React reach router link tag updates url but not the component
- React refs not being evaluated
- How to make switch between menu items with ReactJs?
- Convert values from input box from a string into an array using react-hook-form
- passing id through Link to getServerSideProps :next js
- Matching query images with JSON variable in Gatsby
- ReactJs: How to execute code before a component mounts since componentWillMount is deprecated?
- Adding data to multiple tables using django rest serializers
- How to limit access to my graphql endpoint using Cors or any other node module
- why Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.?
- Passing data down to child on event triggered in parent in React
- Add a class and remove class from another in ReactJS
- Blob to base64 ReactJs
- React render multiple button with props
- Store GraphQL errors as String
- Box Order Animations
- Can't wrap file in form-data and POST to express endpoint
- How do I tell a React Router Route to render......itself?