cft

Truncate Text In React.js and JS

east way to truncate text in react


user

Abod Micheal

a year ago | 1 min read

Truncate is to shorten by cutting off a part , it has a lot of uses , you might have a post or description you wanna cut short if its longer or more than a certain amount of text.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rpk1uvjyh68rm9ss2rpo.JPG)

ill explain how the bellow code works , you could copy and paste code to your project

```javascript

class Cover extends Component {

state = {

banners: [informations or text we wanna truncate (let say i have 300 words)],

};

}

render() {

//reduce your information or text

const truncate = (input) =>

input?.length > 300 ? `${input.substring(0, 254)}...` : input;


return (

<div>

{truncate(this.state.banners.overview)}

</div>

);

}

}

```

this code is basically telling the code if your input is greater than 300 it should reduce to 254 and add 3 dots

```javascript

const truncate = (input) =>

input?.length > 300 ? `${input.substring(0, 254)}...` : input;

```

we later called the function in our return and added what we wanna truncate or cut

```javascript

{truncate(this.state.banners.overview)}

```


Upvote


user
Created by

Abod Micheal

Front End dev

React


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles