Map function in React

Question

I have some data with questions and I want to print the list of them and before every question there should be an icon. There are three types of icons, depending of question type.

How I can do it? That way I get an error "Expected an assignment or function call and instead saw an expression". I tried to fix it in many ways and nothing works :(

render() {
 const questions = questionsToChoose.map(q => {
      const icon = q => {
        if (q.isTrueFalse === true && q.isMultiple === false) {
          return 'a';
        }
        else if (q.isTrueFalse === true && q.isMultiple === true) {
          return 'b'
        }
        else if (q.isTrueFalse === false && q.isMultiple === false) {
          return 'c'
        }     
      };
      <div key={q.id}>
        <p>{icon} {q.content}</p>
      </div>
    });

   return(
    <div>{questions}</div>
   ) 
}

Can you add the service data (questionsToChoose)?

Sandman
– Sandman

2020-05-06 17:05:24 +00:00
Commented May 6, 2020 at 17:05 — Sandman
– Sandman, Commented May 6, 2020 at 17:05

Shubham Khatri · Accepted Answer · 2020-05-06 18:16:18Z

2

icon is defined as a function, you need to call it. Also moving it outside of render will improve performance

icon = q => {
  if (q.isTrueFalse === true && q.isMultiple === false) {
    return 'a';
  }
  else if (q.isTrueFalse === true && q.isMultiple === true) {
    return 'b'
  }
  else if (q.isTrueFalse === false && q.isMultiple === false) {
    return 'c'
  }     
};

render() {
 const questions = questionsToChoose.map(q => (

      <div key={q.id}>
        <p>{this.icon(q)} {q.content}</p>
      </div>
    ));

   return(
    <div>{questions}</div>
   ) 
}

edited May 6, 2020 at 18:16

answered May 6, 2020 at 17:05

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

maja Over a year ago

It works, thank you! :) I only needed to also change {} for () in map function after removing icon function.

Shubham Khatri Over a year ago

Glad to have helped. Yes I missed that in brackets thing in the post. Glad you figured it out yourself. :)

Collectives™ on Stack Overflow

Map function in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related