react component not working properly when rendered multiple times - reactjs

Question

Given below is code of a react component(Newsitem) and I have passed title as props through API. In Newsitem there is a span tag which I need to make hidden when the title passed in Newsitem contains less that 70 characters. But that doesn't happen, what happens is that whenever title has less than 70 characters so the span tag of first newsItem which was rendered get hidden and not of that newsitem to which that title belonged
export class NewsItem extends Component {
state = {
title: true
}
componentDidMount(){
let readTitle = document.getElementById('readTitle')
if(this.props.title.length<70){
readTitle.style.visibility = 'hidden'
console.log('Done....');
}
console.log('componentDidMount() lifecycle');
this.setState({title : !this.state.title})
}
render() {
console.log('Render lifecycle');
let {title , description , imageURL , newsURL} = this.props;
return (
<>
<div>
<div className="card" style={{width: '18rem'}}>
<img src={imageURL} className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title" style={{display: 'inline'}} id='title'>{title}</h5>
<span id='readTitle'><b>Read More</b></span>
<p className="card-text">{description}</p>
Read More
</div>
</div>
</div>
</>
);
}
}
export default NewsItem;

Answer 1

Further to my comment, I would probably use a stateless functional component, and the React.useRef hook and do something like this:
import React, {useRef, useEffect} from 'react';
const NewsItem = ({title , description , imageURL , newsURL}) => {
const readTitle = useRef(null);
useEffect(()=>{
if(title.length<70){
readTitle.current.style.visibility = 'hidden'
console.log('Done....');
}
}, [title])
return (
<div>
<div className="card" style={{width: '18rem'}}>
<img src={imageURL} className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title" style={{display: 'inline'}} id='title'>{title}</h5>
<span ref={readTitle}><b>Read More</b></span>
<p className="card-text">{description}</p>
Read More
</div>
</div>
</div>
);
};
export default NewsItem;
Should work as expected, and is considerably more concise :)

Answer 2

There is a very important rule in react and it is to not use js dom functions in the middle of components. If you use them you can create conflicts between components and states. You can instead use React refs in this case.