score:0
i think there's a simple way to do that now. you can use this code to update input.
class input extends component {
state = {
yourinput: '',
};
handleinput = (e) => {
this.setstate({yourinput: e.target.value});
};
render() {
return (
<div>
<h2>{this.state.yourinput}</h2>
<input onchange={this.handleinput} value={this.state.yourinput} />
</div>
);
}
}
try to modify your code based on this for the simplicity.
score:1
here is yours solution
<sortablecontainer coordinateslist={this.state.coordinateslist} drag={this.handledragging}>
{this.state.coordinateslist.map((item, index) => (
<sortableitem
key={item}
index={index}
classname="sortable-item"
>
<sorticon />
<input onchange={(e) => this.handleinputchange(e, index)} type="text" value={`x: ${item[0]}`} />
</sortableitem>
))}
</sortablecontainer>
handleinputchange(e, index){
let updatedstate = [...this.state.coordinateslist];
updatedstate[index] = number(e.target.value)
this.setstate({
coordinateslist: updatedstate
})
}
Source: stackoverflow.com
Related Query
- Change input given value to a custom value in ReactJS
- reactjs custom component input value doesnt update with state change
- reactjs input value does not change (with defaultValue)
- Input type="text" default value cant able to change in reactjs
- reactjs how to handle value change on input array properly
- Change value on dynamic input fields in reactjs
- Refresh input to change value ReactJS
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- How to get input text value on click in ReactJS
- Change input value with useRef
- Reactjs - Update options by hitting API on every input change in Autocomplete component (Material UI)
- Using an input field with onBlur and a value from state blocks input in Reactjs JSX?
- React change input value onChange
- Trigger change events when the value of an input changed programmatically React
- Change readonly attribute of input element: ReactJS
- Change input value in admin-on-rest from another component
- change value of input made with react from chrome extension
- Highlighting value change ReactJS
- How to change input value in redux
- Bind text input value on change event - React Native + Redux
- Input attribute doesn't update when const change value
- React Testing Library: Unable to Change Material UI DatePicker Input Value
- React input value not re-rendering on button change
- How to Pass Key value from inputText change in ReactJs in typescript?
- How to set or clear value of material-ui Input in ReactJS
- MUI Select | Change how the selected value display in Input
- Input fields lose focus on each value change in a complex Formik form
- Display file name for custom input file using Reactjs
- How to filter a value exactly equal to a given input in react-table?
More Query from same tag
- How to set defaultParams with a recompose, lifecycle HOC?
- SetState not forcing a rerender on a functional component?
- React TypeScript type hint auto-completion does not work with React.forwardRef in Visual Studio Code
- How to add multiple style attributes to a react element?
- Error when using redux-persist with redux-immutable
- CodeSandbox.io <img> tag not loading image
- Why doesn't my UI properly rerender my deleted object?
- React VictoryBar style difficulties
- Embed a React component in a text area, and then parse it?
- Event listeners and refs in React 16
- React JS & HTML : Calculating the height of the container by the given objects from API (inside the container)
- React Conditional Rendering of Component Inside Function Not Working
- How to ignore the "ResizeObserver loop limit exceeded" in TestCafe
- React redux slider
- React native + Mobx, @inject decorator throws an error
- Typescript,testing Api calls in Redux actions, mocking class in Enzyme, Jest
- Handling multiple use effect in a single react component
- React Hooks Const Component vs Functional Component
- React: Send array only
- Using Nav tabs, first tab is always selected when I choose another tab in React Bootstrap
- Correct way of Creating multiple stores with mobx and injecting it into to a Component - ReactJs
- How to disable scroll parent component when child page (popup page) is opened? - CSS
- Rendering process for SSR React application and async code execution
- Animate the show / hide of table rows in React
- Why data from local Json file doesn't work on gh page?
- How can I have class-wide constant in my React Component class?
- How to compare object properties between different objects in different arrays
- props working in console, but not rendering on front end - React
- State returns an empty array even after setting in useEffect
- Is it possible to use spread out operator to set the react component props?