How to derive objects from localStorage to React?

The recorded data in localStorage:
5a34d8ab774cc422178128.png
All of them should be taken out and divided into different div blocks (task0, task1, .... , taskn)
I do so:
class TaskOutput extends Component { 
 render() {
 for (var i = 0; i < localStorage.length; i++) {
 const list = JSON.parse(localStorage.getItem('task'+i))
 return (
 <div classname="{'task'+i}">
<h1>{list['title']}</h1>
<p>{list['description']}</p>
</div>
)
}
}
}

Displays only the first key task and the cycle stops. How to make a withdraw all? Help please:)
June 10th 19 at 14:28
3 answers
June 10th 19 at 14:30
Solution
You need not return to do, and to write it to the array. And the key is to take the index and not in the form of "task"+i

class TaskOutput extends Component { 
 render() {

 var list = [];
 for (var i = 0; i < localStorage.length; i++) {
 const list = JSON.parse(localStorage.getItem(localStorage.key(i)))
 list .push(
 <div classname="{'task'+i}">
<h1>{list['title']}</h1>
<p>{list['description']}</p>
</div>
)
}
 return <div>list</div>;
}
}
Thank you so much! - Murray.Herzog commented on June 10th 19 at 14:33
June 10th 19 at 14:32
Solution
class TaskOutput extends Component { 
 render() {
 const list = Object.keys(localStorage).map(key => {
 const listItem = JSON.parse(localStorage.getItem(key));

 return (
 <div classname="{key}">
 <h1>{ listItem.title }</h1>
 <p>{ listItem.description }</p>
</div>
);
});

 return <div>{ list }</div>;
}
}
Thank you:) - Murray.Herzog commented on June 10th 19 at 14:35
June 10th 19 at 14:34
for such things to render in a decent society, break your fingers
reading from localStorage, the Internet, and any other long operations to danine should not be in the component

I would use redux for data thunk for asynchronic operations, and if you then wanted to add a backend with API, or plug in some sas like firebase instead of localStorage, you wouldn't have to change components in a single line of code
Yes, I understand:) Just so you need here. Redux is not yet in my understanding:) - Murray.Herzog commented on June 10th 19 at 14:37
whereas for the future (with that when you teach new people) would make all the data in one component and procedual them suddenly
ie in one smart containere would form array keys and object entities for these keys (it would look like this)
.....
const result = ['task0', 'task1', .....]
const entity ={
task0: {......}
}
....

well, in stupid component would just renderil data from props
this approach makes the code a little cleaner and easier transition to redux - Murray.Herzog commented on June 10th 19 at 14:40
hmm, okay, thanks:) - Murray.Herzog commented on June 10th 19 at 14:43

Find more questions by tags ReactJavaScript