How can I add multiple conditions in react?

Question

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>

Answer 1

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>

Answer 2

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>
}