Map function React

Question

I have a grouped object. Then I exchanged the object for the array: const objectToArray = ["Since", Array(7)]. Then I want to map the array to get it objectToArray[0] (shows picture) and objectToArray[1] (shows list of question). I want to show the category photo and the list of questions below.

import { groupBy } from 'lodash';
import QuestionsListItem from './QuestionListItem';

const images = require.context('../../img', true);
const imagePath = (name) => images(name, true);

const QuestionsList = ({ questions }) => {
  const groupByList = groupBy(questions.questions, 'type');
  const objectToArray = Object.entries(groupByList);

  const questionListItem = objectToArray.map((array) => (
    <img src={imagePath(`./${array[0]}.png`)} alt="star" />,
    array[1].map((question) => (
      <QuestionsListItem
        key={question.id}
        question={question}
      />
    ))));


  return (
    <div>
      <ul>
        { questionListItem }
      </ul>
    </div>
  );
};

The code shows me a error: Line 14: Unexpected use of comma operator no-sequences This is it <img src={imagePath(./${array[0]}.png)} alt="star" />,

When you delete a comma, it gets an error

  Line 15:  Parsing error: Unexpected token, expected ","

  13 |   const questionListItem = objectToArray.map((array) => (
  14 |     <img src={imagePath(`./${array[0]}.png`)} alt="star" />
> 15 |     array[1].map((question) => (
     |     ^
  16 |       <QuestionsListItem
  17 |         key={question.id}
  18 |         question={question}

How to solve this problem? thanks in advance :)

What are you actually trying to do here, one img for each item in the array? — Colin Burke
– Colin Burke, Commented Dec 11, 2018 at 11:19
@Colin yes, i want render one img for one array. I have a few categories of questions. this is my data ["Since", Array(7)], ["Fashion", Array(7)], ["Math", Array(7)], ["Nature", Array(7)] — Elder
– Elder, Commented Dec 11, 2018 at 11:22

Colin Burke · Accepted Answer · 2018-12-11 11:31:43Z

1

Kind of an obscure error, but the way you have it now, you'd be returning multiple nodes at the same level, so you need to wrap it with something.

Try this:

const questionListItem = objectToArray.map(array => (
  <React.Fragment>
    <img src={imagePath(`./${array[0]}.png`)} alt="star" />
    array[1].map((question) => (
    <QuestionsListItem key={question.id} question={question} />)
  </React.Fragment>
));

answered Dec 11, 2018 at 11:31

Colin Burke

17.3k13 gold badges56 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

Map function React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related