Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why It doesn't show this to the screen

Basically I want show less description and when I press "Read More" I wanna show the full description

The code:

import { useState } from "react";

const JobsListing = ({ job }) => {
  const [showFullDescription, setShowFullDescription] = useState(false);

  let description = job.description;

  if (!showFullDescription) {
    description = description.setstring(0, 90) + "...";
  }

  return (
    <div>
      <div className="bg-white rounded-xl shadow-md relative">
        <div className="p-4">
          <div className="mb-6">
            <div className="text-gray-600 my-2">{job.type}</div>
            <h3 className="text-xl font-bold">{job.title}</h3>
          </div>

          <div className="mb-5">{description}</div>

          <h3 className="text-indigo-500 mb-2">{job.salary}</h3>

          <div className="border border-gray-100 mb-5"></div>

          <div className="flex flex-col lg:flex-row justify-between mb-4">
            <div className="text-orange-700 mb-3">
              <i className="fa-solid fa-location-dot text-lg"></i>
              {job.location}
            </div>
            <a
              href={`/job/${job.id}`}
              className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
            >
              Read More
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default JobsListing;

I expected to show the description from 0, 90 using setstring to show less description also when I click "Read More" I expect to show the full description

Tags:

2

Answers


  1. 0

    1. You’re not toggeling showFullDescription with the button, I’ve added an onClick()

      <button onClick={() => setShowFullDescription(p => !p)}>
    Read More
</button>

    2. Instead of the if at the beginning, use a ternary operator that will render the complete description, or uses substring() to only show the first 50 chars:

      {
    (showFullDescription)
        ? job.description
        : job.description.substring(0, 50) + ' ...'
}

    Working example:

    const { useState } = React;

const JobsListing = () => {
  
  const job = {
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    salary: 1,
    type: 'Job Type',
    title: 'Job Title'
  } 
  const [showFullDescription, setShowFullDescription] = useState(false);

  return (
    <div>
      <div className="bg-white rounded-xl shadow-md relative">
        <div className="p-4">
          <div className="mb-6">
            <div className="text-gray-600 my-2">{job.type}</div>
            <h3 className="text-xl font-bold">{job.title}</h3>
          </div>

          <div className="mb-5">
            {
              (showFullDescription)
                ? job.description
                : job.description.substring(0, 50) + ' ...'
            }
          </div>

          <h3 className="text-indigo-500 mb-2">{job.salary}</h3>

          <div className="border border-gray-100 mb-5"></div>

          <div className="flex flex-col lg:flex-row justify-between mb-4">
            <div className="text-orange-700 mb-3">
              <i className="fa-solid fa-location-dot text-lg"></i>
              {job.location}
            </div>
            <button
              onClick={() => setShowFullDescription(p => !p)}>
              Read More
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};


ReactDOM.render(<JobsListing />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
  2. 0

    Try this.

    import { useState } from "react";

const JobsListing = ({ job }) => {
  const [showFullDescription, setShowFullDescription] = useState(false);

  const handleClick = () => {
    setShowFullDescription(prev => !prev)
  }

  return (
    <div>
      <div className="bg-white rounded-xl shadow-md relative">
        <div className="p-4">
          <div className="mb-6">
            <div className="text-gray-600 my-2">{job.type}</div>
            <h3 className="text-xl font-bold">{job.title}</h3>
          </div>

          <div className="mb-5">{showFullDescription ? job.description.subString(0, 30) : job.description}</div>
          <span onClick={handleClick}> Read {showFullDescription ? "less" : "more"} </span>

        </div>
      </div>
    </div>
  );
};

export default JobsListing;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search