ReactJSX Meets Instagram: Adding and Deleting Comments Made Easy
Did you know that Instagram is completely based on the ReactJS library?
Would you like to know how to code some of its basic features like adding and/or deleting comments? If yes, keep reading!
Master the Power of ReactJSX
Begin by setting up a simple application in the create-react-app environment, which will download and install several NodeJS packages using npm, and then move on to adding state within the application. Learn how to wire up event handlers to add new comments, and also wire up event handlers to delete comments.
Objectives:
- develop a simple application in the create-react-app environment
- use state and props within the application
- wire up event handlers to add and delete comments
If you are new to React and don’t feel confident enough building this app, please watch tutorials on Youtube.
Let’s get coding!👩💻
Open Visual Studio code terminal by pressing Ctl + ` and type: npx create-react-app simple-comment-app. Read more about this command here.
Next go into subfolder created: cd simple-comment-app. And run: npm start to run the development server for React. The app will be opened in your browser at http://localhost:3000/.
Explore your public and source code folders by expanding it (Img-3, index.html is our entry point).
Next we will create a new component called Comment.js which will render out the message that has been passed in all the way from the App top-level component down to Comment. Within the render function we’ll display the comment in the form of a table. The table element has the css class “comment” applied. And within this table, we represent this comment using a single row (that is the <tr> tag). In the first cell of this row we display the message icon. The second cell is the actual content of the message that is passed in via props from CommentList to Component. The third cell is the trash icon to delete the comment. At the very bottom, make sure you have export default Comment so this comment module is available to the code in other js files.
Let’s wire up a delete event handler to be able to delete comment using index (Img-4, line 6–8). Every Comment component has an associated index that has been passed in as a part of the props. This deleteComment event handler only needs to invoke this.props.deleteComment and pass in this.props.index. Also we want our users to be able to delete a comment by clicking on the trash icon, for that I’ll add onClick event handler to the cell that contains this icon in <td> tag (Img-4, line 19).
I’ll now create a new file CommentList.js to represent a component which will render and display the list of comments. Import react, and Comment component to this file. Then I’ll create a class with render function that returns a <div> with a className=”commentList” and props that were passed from the highest level App Component (see App component code on Img-7). The messages that we need to render within our app are available in this.props.messages. I’ll invoke the map function on the messages list (Img-5, line 13). The map function accepts as an input argument another function which applies some kind of transformation on each element in the list. Here the transformation we want is that for every message, we’ll pass that message down to a Comment component (Img-5, line 15). You’ll specify attributes for this Component: a key to uniquely identify this component, a value of the prop message which is the message that the Comment has to render. In order to be able to delete a message using its index position, we need to pass index for each comment into the this component. I’ll set up a variable named index that I initialize to 0 (Img-5, line 8). Next I’ll pass the specified index value for every Comment component (Img-5, line 15). In addition, I’m going to pass in another prop called index= {index++}: the last value for index, initialized at 0 first, will be passed in, and then the index value will be incremented for the next comment. Also I’ll use the spread operator {…this.props} to pass in all of the props that we receive from a higher-level component.
Let’s go ahead and add another component to our application CommentBox.js (Img-6). This will be a form that will allow us to input a new comment that will be displayed in a list of comments. Set up the import statement for react and component from the React package. In the render function we have an outer <div> and input textbox. Under the input textbox, we have a button with the text: Post. This is the component that will allow us to post a new comment to our app. I’m going to add a constructor at the top on line 4 Img-6 which accepts the props as an input argument, and calls the superclass while passing in the props to it. Here I have a decision to make: should this CommentBox work with the input text box as a controlled component or an uncontrolled component? This choice is important for several reasons: best practices in React suggest that your components should typically be controlled components, where the value that you specify in your input box is controlled using your React.Component state (you typically don’t allow your form elements to manage their own internal data). Here I’m going to make a conscious choice to have my input text box be an uncontrolled component. The reason for this is that this is fairly simple form element. Now we have to create a ref to be able to reference the DOM node of that component (Img-6, line 7). We’ll need a reference to this ref within the render function so the input has the ref attribute (Img-6, line 18). Once the user has specified the comment that he/she wants to add within the input text box, the user will then move on and click on the Post button. So we need to add the click handler for the Post button in order to add the message to our list of messages (Img-6, line 19).
It’s standard practice to have the highest level component in your application be an ‘./App.js’. I’m going to get rid of the existing code here, which refers to the starter app that was created using the create-react-app environment and I’m going to paste in my own code.
Before we add interactivity, let’s add some state to our application (Img-7, line 6–13). We’ll store our state in the highest component possible (best practice!), which is the App Component. The state just holds the list of messages that are going to be displayed using our comment app. The state here comprises of just a single property: the list of messages that we want to display in our app. I’ll pass the list of messages that I have in the state of this App Component down to the <CommentList> via props (Img-7, line 40).
Having interactivity added to your component is pretty important and that requires event handlers. No interactivity means that the app is boring at this point in time. Let’s fix that (Img-8, line 15–23).
I’m going to add an event handler to handle adding a new comment to be displayed amongst the comments in our application. I’ve defined event handler called addComment using the arrow notation (Img-8, line 15). Event handlers are often defined using the arrow notation because when you use the arrow notation within an ES6 class, the method that you have defined is automatically bound to the current instance of the component. Within this addComment event handler all we’ll do is update the current state of the App component. We’ll invoke the this.setState function (Img-8, line 16). This takes an input argument — a function that has the input argument which is the previous state of this object. We’ll use the previous state to access the current list of messages in this component before we update the state.
prevState.messages.concat will create a new JS list that will save in the messages variable (Img-8, line 17). We’ll update the new copy of this messages list by pushing the new message that we wanted to add at the very end of the list using messages.push (Img-8, line 18). Now we’ll return the new state of the component. The messages property has this new list of messages with the brand new message appended to the very end of this list (Img-8, line 19–21). Changing the state of the component from this event handler will re-render this component. But we first need to wire up this event handler though.
The component responsible for allowing us to add new messages that will now become a part of our CommentList is the CommentBox. I’m going to pass in this event handler this.addComment in the form of the props to the CommentBox Component (Img-9, line 38). The addComment event handler is defined here in this app comment which is passed in as a function prop to the CommentBox.
Next we’ll set up an event handler allowing us to delete comments. Take a look at this deleteComment event handler’s input argument: it takes in the index of the comment that you want to delete and updates the state accordingly (Img-10, line 25). Once we know the index of the comment that has to be deleted, we call this.setState and pass in a function that allows us access to the previous state. We make a copy of the current messages using prevState.messages.concat(). The messages are then available to us within the variable messages, we call messages.splice to remove the messages specified by index (Img-10, line 28).
In our React application, we’ll allow users to delete messages by clicking on the trash icon next to each message which means that we have to pass in this deleteComment event handler to the CommentList component (Img-11, line 41). The CommentList is what displays individual messages using the Comment component.
You did it! Thank you for coding with me! I appreciate you time and attention!
