How can I add multiple conditions in react?

user_17997711 0
Viewed 215

I have button Description. When clicked description is displayed. Now I want to add Read more/less on description.

With the belpw code, I do not see button Description, description is displayed directly

Flow- Display button-> On click-> Show 200 character text (With Read more option)

  const [readMore, setReadMore] = useState(false);


  const [displaydescription, setDisplayDescription] = useState(false);
  const clickHandler = () => {
    setDisplayDescription(true);
  };

 <p>
          {displaydescription || readMore
            ? description
            : `${description.substring(0, 200)}`}
        </p>
show-hide reactjs button javascript
2 Answers

You have to change your code to first display description and then in second condition to verify if you want to show the full text like this:

const [readMore, setReadMore] = useState(false);
const [displaydescription, setDisplayDescription] = useState(false);
const clickHandler = () => {
    setDisplayDescription(true);
};

 <p>
    {displaydescription 
       ? (
            readMore
               ? description
               : `${description.substring(0, 200)
         )
       : null}`
    }
 </p>

user_55071650

The syntax to add a condition in React jsx is {condition && } so you could try

{ description && !readmore 
  <p> `${description.substring(0, 200)}` <p>
}
{ description && readmore 
  <p> `${description}` <p>
}
user_160308640
Related