How to make a readmore button in react?

Question

i am making a readmore button for a too long text area. its giving me an error expected an assignment or function call and instead saw an expression

Here is the code

readMore = () => {
   var showResult = false; 
   if (showResult === false) {
      return  <div className = "futura-16-300" style = {{textAlign : "left"}}>
      Welcome to level 1 of the whiplash phyx. This phyx is made for those who have suffered from a minor whiplash from a car accident and have been cleared by their medical professional to start physical rehab..
      <a onClick={() => {showResult = true}} className="futura-16-300">Read more</a> 
      </div>
    } else if (showResult === true) {
      <div className="futura-16-300" style = {{textAlign : "left"}}>
      If you are unsure about your diagnosis, feel free to consult your doctor or book a phyxable consultation with one of our practitioners online. After suffering from a minor fender bender, your neck muscles become reactively tight. Your posture muscles are still in shock from the collision, and the stress of the awful event will make those muscles even tighter. Fear not, if done properly, this phyx will provide you with relief, while teaching you how to combat pain and stiffness from coming back. Like most of the phyxable solutions, there are 3 levels to this phyx. We start off with a very simple and relaxing Level 1 to get the muscles to calm down. Level two improves your posture and further diminishes the pain and tightness. If you are successful, level 3 focuses on getting your neck and mid-back muscles back to and even stronger than what they were prior to the accident. This phyx should be performed once a day. Each session of each level will progressively become more challenging. Feel free to stay at a particular session if you felt it was too challenging, or if there is more than a moderate amount of soreness a day after the session. But if you are up for the challenge, most of our users finish level 1 within one week.
      <a onClick={() => {showResult = false}} className="futura-16-300 ">Read less</a> 
      <br/>
      </div>
      } 
  }
{this.readMore()}

Answer 1

Here is the working solution to your problem -

https://codesandbox.io/s/react-example-kouyx

There were multiple problems with your code snippet.

• Your problem: expected an assignment or function call and instead saw an expression , is because in the else condition, there was no return statement. There was a dangling <div> which was never assigned to a variable nor was it returned.
• As well the showResult should have been used in the state to manage the Read More and Read Less feature.

Hope the solution is explanatory via the codesandbox link. I have added a state handler and also return statement to fix it.