React hooks show more/less text like in youtube comments section - reactjs

Question

I have some array of comments like in youtube comments section and i wan't to make it show less/more button for long comment. I've stuck a little on a way to do it locally on item without total rerender (rebuild of block) or any states values.
function commentsGenerate() {
let block = comments.map((comment, i) => {
let splitLength = 400
let shortDesc = comment || '' // for null vals
let shortened = false
if (shortDesc.length > splitLength) shortened = true
shortDesc = shortDesc.substring(0, splitLength)
return (
<div key={i}>
<div>{`${shortDesc}${shortened ? '...' : ''}`}</div>
{shortened && <Button onCLick={ () => {'how?'} >More</Button>}
</div >
)
})
setSectionBlock(block)
}

Answer 1

You can't/shouldn't do this sort of thing without using state somewhere. In this case I suggest that you separate your comment code and state into a separate component which can handle its own expanded state. You can then use the state to adjust the rendering and styling of your output:
import React, { useState } from 'react'
// ... //
const Comment = ({comment:shortDesc = ''})=>{
let splitLength = 400
let shortened = false
const [isExpanded, setIsExpanded] = useState(false)
if (shortDesc.length > splitLength) shortened = true
shortDesc = shortDesc.substring(0, splitLength)
const handleToggle = ()=>{
setIsExpanded(!isExpanded)
}
return (
<div key={i}>
{!isExpanded ? <div>{`${shortDesc}${shortened ? '...' : ''}`}</div> : null}
{shortened && <Button onClick={handleToggle}>{isExpanded?'Less':'More'}</Button>}
</div >
)
}
Use this component in your mapping like this:
let block = comments.map((comment, i) => <Comment comment={comment} key={i} /> )