Truncate Text In React.js and JS
east way to truncate text in react
Abod Micheal
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.

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
Abod Micheal
React

Related Articles