Let's open up Visual Studio Code and inside of your blog-item, we haven't touched the blog-item in a few guides, so just as a reference point, this is gonna be in your components directory, blog directory and then blog-item. So, inside of here, the very first thing that we need to do is import our two libraries, so the first one is gonna be striptags, so I'm gonna say striptags just like this from the striptags library.

Then the next one's gonna be import and this is the Truncate component, so as a component, we're going to have it be uppercase like this from react-truncate.

blog-item.js

import React from "react"; 
import { Link } from "react-router-dom";
import striptags from "striptags";
import Truncate from "react-truncate";

With both of those in place, now we can actually call them. So, the first thing that I want to do is take this content here and I'm going to give us a few lines to work with and I'm also, let me just actually get rid of the content entirely and we'll add this in manually. We're going to call the Truncate component and this component accepts props and it also expects to have some child content, so just like we've worked within the past, like even in this file with this Link component, it takes in props, so it takes in a prop of two and then it takes a child component or child props as a title in this case.

What we wanna use with the Truncate component is a little bit different and all of this if you're curious as per usual, all of this in the instructions, it's in the documentation. That's how when I was researching it, that's what I did, I just went through their examples, I saw the props that were passed to it, I saw you would pass in your content as a child and that was all I did.

So, the very first thing that it takes in is a props of lines, so this is the number of lines we want the summary to allow, so I'm gonna say lines and in this case, I'm gonna set lines equal to curly brackets five, so I want to allow for five lines of the summary, that's how it knows how much to shorten it to.

Then the next item is pretty cool, it's called the ellipsis prop, so with an ellipsis, what you can do is say ellipsis equals and then in curly brackets you pass in the tag or component or HTML code for what you want to render out for the Read More link, so remember how I said what I wanna have here is I want the summary to stop right around here after that five live mark and then I wanna have a link that says Read More.

What the ellipsis does is it gives you the ability to actually pass in any kind of code you want. You could use an icon, you could use a link like we're going to use, or you could use nothing, it's completely up to you. I want to say ellipsis and then this takes just regular HTML.

So I'm going to give it a span tag here and let's also close out the span and inside of here, I'm going to give three dots, so just a regular ellipsis and then a component, so I'm gonna say I want to link to and this is gonna be exactly what we have up here, so I can even copy what we have here with this link prop with to, close off the link and then say Read more, and that's all you need to do inside of the ellipsis prop.

Now, close off your truncate and then inside of here, we're gonna be passing in content, so this is where we can pass our content back in. Now, we've not used our striptags yet, so this is not gonna pull out the HTML code but this should give us our summary, so hit save here and then come back to Chrome and hit refresh and look at that.

Now we have a much cleaner looking interface and you can see that we have all of the posts that have more than five lines have our Read more link and if you click on it, you'll see that's fully functional, it takes you right to the page you'd expect and if it has under the five lines, it doesn't show any kind of Read more at all.

And this is part of the reason why I wanted to use the Truncate component as opposed to doing this ourselves. It would be completely possible for us to build our own Truncate type of component, but we'd have to take into account all kinds of edge cases. We'd have to do things like check to see how many characters there are or break it down to see how many lines there are and that's a decent amount of processing and data parsing that you'd have to do in order to build this out and as you can see, with just a couple lines of code, we're able to add all of that and so, that looks really good.

Now that we have this, let's concentrate on pulling these tags out and I think you're gonna be pleasantly surprised by how easy this is. All you have to do is call the striptags function and you just wrap the content inside of it.

<div>
        <Truncate
          lines={5}
          ellipsis={
            <span>
              ...<Link to={`/b/${id}`}>Read more</Link>
            </span>
          }
        >
          {striptags(content)}
        </Truncate>
      </div>

So, by default striptags will remove all of the tags out of your string and that's what we want in this case. If you ever have a scenario where you may only want to remove some tags, striptags also gives you that ability. One example that I personally had to use that for is for a social media application I was building that allowed for people to type in HTML code and I used a rich text editor but I did not want to allow them to write JavaScript and the reason for that is because if you allow a user to type in JavaScript code, they could technically hijack users' browsers, their sessions, they could do all kinds of things that are very bad from a security perspective.

So, I wanted them to be able to use regular HTML, so I wanted them to be able to use headings and italics and bolds and images but I didn't want them to be able to inject their own malicious JavaScript code and so, I use this type of tag like striptags and I said I want you to allow everything except scripts and so, that worked and so, that's one way that you could use some of those optional parameters, but in this case, I wanna remove any kind of tag.

So, if you hit save now and come back to Chrome, you'll see that we now have all of our content has been fully cleaned up. We no longer have any kind of tags there. We simply have all of our great content. These look like summaries, they look almost like we created a whole other model just for summaries because we're able to clean this up.

We pulled out the HTML, we shortened it, we truncated it, so that we could have our Read more links and now we have a much more universal and unified type of user experience and everything is fully functional. So great job if you went through that, in the next guide, we're gonna start working on the ability to add our image uploader to our blog modal form.

Resources

• Source code