Use If Condition to not Return a value in function

Question

I have a function that I would not like to render if a certain condition is not met.

runinrender(){
          let data = this.props.loadedPolls;
         return  data.map((element,i) => {
            return (<div key={i} className='elementPoll'>
                   <ul>
                      <li>Complaint: <p> {element.question}</p></li>
                      <li>Author: <p>{element.createdBy}</p> </li>
                      
                      <li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
                   </ul>
                   
            </div>)
           });
            
     }

Essentially, I want to add

if the element.question.charAt(0) == 'K' only then return values of complaint, ModalComplaint and author, else return nothing

I have tried adding the if statement in multiple places; however, none seem to work. Any help is appreciated.

Answer 1

You could use filter to narrow down your array before you map it.

Array.prototype.filter

runinrender(){
    let data = this.props.loadedPolls;
    return data.filter(element => element.question.charAt(0) === 'K').map((element,i) => {
        return (<div key={i} className='elementPoll'>
            <ul>
                <li>Complaint: <p> {element.question}</p></li>
                <li>Author: <p>{element.createdBy}</p> </li>

                <li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
            </ul>

        </div>)
    });

}