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