score:0
Accepted answer
remove the logic inside componentwillupdate
and move it to handleitemchanged
. like so:
export default class additem extends react.component {
useritems;
constructor(props) {
super(props);
this.state = {
content: "",
items: [],
};
}
updatemessage(event) {
this.setstate({
message: event.target.value,
});
}
handleclick() {
var items = this.state.items;
items.push(this.state.message);
this.setstate({
items: items,
content: "",
});
}
handleitemchanged(i, event) {
var items = this.state.items;
items[i] = event.target.value;
this.setstate({
items: items,
});
localstorage.setitem('items', json.stringify({items, message :""}));
}
componentdidmount() {
this.useritems = json.parse(localstorage.getitem('items'));
if (localstorage.getitem('items')){
this.setstate({
items: this.useritems.items,
message: this.useritems.message
})
}else {
this.setstate({
items: [],
message: ""
})
}
}
renderrows() {
var context = this;
return this.state.items.map(function (o, i) {
return (
<tr key={"item-" + i}>
<td classname="2">
<div>
<input
type="text"
value={o}
onchange={context.handleitemchanged.bind(context, i)}
</tr>
Source: stackoverflow.com
Related Query
- Why the item is not saved on the localStorage?
- onclick of my submit button, the array stored in localstorage does not add the new item but is replaced while using react
- Arrays - why does something work with one item and not another even though they (to me) appear the same?
- Why does not localStorage save the last symbol in this component?
- Why does calling react setState method not mutate the state immediately?
- Why is the `MouseEvent` in the checkbox event handler not generic?
- Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
- Why is `Promise.then` called twice in a React component but not the console.log?
- Why doesn't this select list render with the correct item selected based on the defaultValue
- Why Material-UI is not recognizing the theme.spacing function?
- Why does my Animated view not stay in the correct place in React Native?
- Why getDerivedStateFromProps does not allow to re-render with the state update? Not a problem for componentWillReceiveProps - ReactJS
- Why is this returning the error .contains() is not a function
- Where should I store my JWT in 2019 and is the localStorage really not secure?
- Why is the DOM not updating with state change in ReactJS?
- Why does jest-dom give the error "TypeError: expect(...).not.toBeVisible is not a function" when I use it
- Why is clearTimeout not clearing the timeout in this react component?
- Why can I not use a variable as parameter in the require() function of node.js (browserify)?
- Why is my React checkbox onChange handler firing on render and then not when the box is clicked?
- Why am I getting the error message "Property 'then' does not exist on type 'AsyncThunkAction'"?
- Why do I always get a cors error that wildcard * is not allowed, although I specified a origin on the server?
- why do i get the Error Module not found: Can't resolve 'redux'
- Using React, why is redux saga not intercepting the action?
- Why are cookies not sent to the server via getServerSideProps in Next.js?
- Why is only the last item in a map function being changed in react app?
- React + Redux - Why not connect all the components?
- Why it says the `hover:` class does not exist. If `hover:` is a custom class, make sure it is defined within a `@layer` directive?
- Why does react call render function if I have not changed the reference of the state?
- Why is this variable from the Redux store not in the `this.props` on React page?
- What is the benefit of having $sce or Strict Contextual Escaping in angularjs and why react does not need to do it?
More Query from same tag
- Change color of a TreeNode depending on some condition; using tree from antd React Library
- How to change specific item on state of array in React?
- Transition entire React component so that other components adjust to it
- Adding margin between rows in a table HTML
- Filter array onClick and render the remaining items from the array
- Error on passing down function with argument to grandchild in React
- Firebase Auth for Twitter with React
- Props values are not updating in webpack server React js
- Prevent going to the previous page on browser back button
- React - Axios call make too many requests
- I want to remove Underline in Bootstrap Link
- document.getElementById for iFrame in ReactJS
- Simple D3: circles not appending to svg element
- In react router v4 how does one link to a fragment identifier?
- React test onchange dom not updating?
- App.js:69 Uncaught TypeError: Cannot read properties of undefined (reading 'setState')
- What is the benefit to name a default export?
- 'Range' Input type doesn't slide on React.js document, but works on codepen?
- How to access the div element with a key in React JS? (react-dnd)
- React component loses formatting related to className when printing triggered from button, but keeps it when done inline
- use signton and factory design pattern
- Shallow snapshot to ignore child components
- session flush automaically in express-session
- Show/hide button based on state React
- React context inside Route
- 'ckeditor4-react' and 'HTML5 video' plugin
- setState(...) Can only update a mounted or mounting component
- why state is not updated after button click in setinterval react?
- Hide Element Dynamically in ReactJS
- combineReducers() not working in React Redux