1

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>
Improve this question

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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> }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.