I trust everything is going smoothly. A challenge I'm facing involves implementing a button to expand a specific row within a table. Currently, clicking the "show more/show less" button extends all rows when the goal is to do it for each individual table caption row. Additionally, I want to display the button only if the caption length exceeds 250 characters. Below is the code snippet for better visualization. Please feel free to ask if you need further clarification or share any advice! Thank you!
import React, { useEffect, useState } from "react";
import './Home.css';
// Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
// Dependencies
import Axios from 'axios';
import { useNavigate, useLocation, useParams } from 'react-router-dom';
// Function
import VerificationCheck from "../../Functions/VerificationCheck";
const Home = () => {
const navigate = useNavigate();
const location = useLocation();
const userLoggedIn = VerificationCheck.CheckLogin();
const loggedInUser = VerificationCheck.CheckUser();
const [isLoading, setIsLoading] = useState(false);
const [posts, setPost] = useState([]);
const [statusMessage, setStatusMessage] = useState(null);
const [displayShowMore, setDisplayShowMore] = useState(false);
const [showMore, setShowMore] = useState(false);
useEffect(() => {
if (!userLoggedIn) {
navigate("/Login", {
state: {
previousUrl: location.pathname,
}
});
} else {
getAllPost();
}
}, [userLoggedIn]);
const getAllPost = () => {
const url = process.env.REACT_APP_Backend_URL + "/post/get-post-record";
Axios.post(url)
.then((response) => {
for (var i = 0; i < response.data.length; i++) {
if (response.data[i].postsCaption.length > 250) {
setDisplayShowMore(true);
}
}
setPost(response.data);
})
.catch((error) => {
setStatusMessage("Server Side Error");
setIsLoading(false);
});
}
return (
<>
<Header />
<div className="homeBody">
<div className="homeForm">
{isLoading ?
<>
<h1>Loading...</h1>
</>
:
<>
{statusMessage ?
<>
<h1>{statusMessage}</h1>
</>
:
<>
{posts.map(uploadedPost => (
<table key={uploadedPost.postsID}>
<tbody className="postData">
<tr><td><a href="#"><h1 className="title">{uploadedPost.postsTitle}</h1></a></td></tr>
<tr>
<td>
<div className="authorDate">
<h2 className="author">Author: {uploadedPost.postsAuthor}</h2>
<h3 className="datetime">{uploadedPost.createdOn}</h3>
</div>
</td>
</tr>
<tr><td className="btn"><button className="btn" onClick={() => setShowMore(!showMore)}>{showMore ? "Show less" : "Show more"}</button></td></tr>
<tr><td><p className="caption">{showMore ? uploadedPost.postsCaption : `${uploadedPost.postsCaption.substring(0, 250)}${showMore ? "" : "..."}`}</p></td></tr>
</tbody>
</table>
))}
</>
}
</>
}
</div>
</div>
<Footer />
</>
);
}
export default Home;