Render data from localStorage with react

Question

So it's my first steps with react and so far it was ok, I've created three input with username, email and comment. I'm saving the values in the localStorage and everything is fine with this. Now I'm creating another component that can just display them. So basically it takes my comment out of the localStorage and display them in a list. I can log my comments out so my data is retrieved from the localStorage but I have no idea how to structure my data to display it. Should I use a constructor ? Should I just create a simple function that retrieves the data. I'm having troubles wrapping my head around the reflexion of how I should get my infos. Here is what I have :

import React from "react";

export class CommentDisplay extends React.Component {
componentDidMount(){
  var comment = JSON.parse(localStorage.getItem('data'));
  console.log("comment retrieve : ", comment);
  return comment;
}

 render () {
   return (
     <div className="list-group">
       <ul className="list-group-item"></ul>
    </div>
  );
 }
}

Thanks for any help

Solution

If I understood you correctly, you want to use localStorage as a sort of replacement for a database, and store a list of comments there under the key data. In general case, data would be a list of object, where each object contains three properties - username,email,comment.

If there assumptions are correct, I would suggest the following:
Create a wrapper component, something like CommentList, and store the comment list in that component's state:

export class CommentList extends React.Component {
constructor(){
  let comments = JSON.parse(localStorage.getItem('data'));
  this.state = {
      comments: comments
  };
}

render () {
   return (
     ...
  );
 }
}

Then, each comment can be represented as a functional component (stateless component), that receives comment info as props. Something like

function Comment(props) {
  return <h1>{props.usernamename}({props.email}) wrote: {props.comment}</h1>;
}

Inside CommentList component, you can, for example, define a method, renderComments:

renderComments(){
    return this.state.comments.map((comment,index) => 
        <Comment 
            key={index{
            username={comment.username}
            email={comment.email}
            comment={comment.comment}
        />
    )
}

Then simply call this method inside CommentList's render method like: {this.renderComments()}

Hope this helps. If you have questions, please feel free to ask.

Comments

[pkerckhove]

Hi ! yes it is exactly what I'm trying to do ! Thank you very much this is the kind of answer I was looking for. However I'm having troubles when I @idjuradj try to use it : How does the function comment is going to be triggered ? And what should I return ? Only a <li /> ? The error I get is : ` Uncaught Error: CommentDisplay.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.` this is my code : github.com/pkerckho42/CommentSystem

[idjuradj]

@pkerckho I took a quick glance at your code, and I think the problem is that you defined Comment as a function inside CommentList component. I had in mind you define Comment as a separate component. You can define a component as a function (facebook.github.io/react/docs/components-and-props.html). If this is confusing, define Comment as a class, as you did with CommentDisplay

[pkerckhove]

I'm sorry this is confusing for me. What comment are talking about ? The function ? I'm lost. I should be able to render everything within one single component only using the Comment function that returns the username, the email and the comment no ?

[idjuradj]

What I suggested is that Comment should be implemented as a component. What may have confused you is that you can define a component as a function, but only in case that component doesn't have it's own state. So the structure of your code should be (at that is what I suggest) that you have one CommentList component that contains one or more Comment components. Let me know what part of my original post was confusing, so I will edit it and try to be more clear.

[pkerckhove]

Your original post was clear but what confuses me is that I need to create a new component. My index.js has a <CommentDisplay /> element. My ` <CommentDisplay />` component is the one you helped me with. So basically it gets my data from the LocalStorage and returns it as an array with the .map and then should just display it by rendering a <li /> with my datas in it's render(). This was what I wanted to do in the first place. Using another component for this task really confuses me. There are some react things that confuse me a lot.

[idjuradj]

@pkerckho I have edited your code, and included some comments. Take a look here: gist.github.com/idjuradj/575ba66981cccbfae23486cc3e047fac

[pkerckhove]

It's absolutely perfect ! I have such a better understanding of my problem now. Thank you for your help. I've been able to do what I wanted to do. Again thank you very much !