I am currently working on implementing a show more/show less button feature. However, the current version is not very effective as I only used slicing to hide content when the state is false and display it all when true. Now, my goal is to only show the first row in each card but I'm unsure how to achieve this.
const classes = useStyles(props);
const { name, text, firstButtonText, secondButtonText } = props;
const [show, setShow] = useState(false);
const handleReadMore = () => {
setShow(prevShow => !prevShow);
};
return (
<Card className={classes.card}>
<CardMedia
className={classes.media}
image={require(`../../assets/photos/${name}.png`)}
title={name}
/>
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
className={classes.textStyling}
>
{show ? text : text.slice(0, 45)}
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
{firstButtonText}
</Button>
<Button size="small" color="primary" onClick={handleReadMore}>
{secondButtonText}
</Button>
</CardActions>
</Card>
);
};