So it's my first steps with react and so far it was ok, I've created three input with username, email and ment. I'm saving the values in the localStorage and everything is fine with this. Now I'm creating another ponent that can just display them. So basically it takes my ment out of the localStorage and display them in a list. I can log my ments 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 {
ponentDidMount(){
  var ment = JSON.parse(localStorage.getItem('data'));
  console.log("ment retrieve : ", ment);
  return ment;
}

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

Thanks for any help

So it's my first steps with react and so far it was ok, I've created three input with username, email and ment. I'm saving the values in the localStorage and everything is fine with this. Now I'm creating another ponent that can just display them. So basically it takes my ment out of the localStorage and display them in a list. I can log my ments 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 {
ponentDidMount(){
  var ment = JSON.parse(localStorage.getItem('data'));
  console.log("ment retrieve : ", ment);
  return ment;
}

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

Thanks for any help

• javascript
• reactjs
• local-storage
• jsx

• How is CommentDisplay rendered? The data should probably either e from props or the state. Of course it could also just be stored in a local variable for testing purposes. – Felix Kling Commented Apr 27, 2017 at 22:20

1 Answer 1

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

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

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

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

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

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

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

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

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.