I am getting an error in the JSX while calling a function inside it

Question

<Accordion>
 {
   Object.keys(this.state.comparedResult.sourceNotMatched).map((item, index) => (
     <AccordionTab header={"PAGE " + item} key={index}>
       <Item.Group divided >
         {
           this.state.comparedResult.sourceNotMatched[item].map((fields, i) => (
             <>
               <Item key={i}>
                   <span className='reviewCardErrorBody'>{fields}</span>
               </Item>
               {this.isRemoved()}
               <buttonNew label="removed" className="p-button-danger" />
             </>
           ))
         }
       </Item.Group>
     </AccordionTab>
   ))
 }
</Accordion>

./src/components/CodeComparison.js Line 426:9: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error

Answer 1

You are utilizing function incorrectly since you did not include the event when this function is invoked, such as onclick, onload, onkeydown, and so on. And then apply this method to an HTML element, like as

<button className="btn" onClick={() => this. isRemoved()}>test</button>

or

<buttonNew label="removed" className="p-button-danger" isRemoved={this.isRemoved} />

<button className="btn" onClick={() => prpos. isRemoved()}>test</button>