Correct syntax of printing array objects inside array React

Question

I'm new to ReactJS library, and I'm trying to print the following structure of array:

Main Array[
  Array0[
     Object0{
      questions: "question1",
      answer1: "answer1",
      answer2: "answer2"
     },
     Object1{
      questions: "question1",
      answer1: "answer1",
      answer2: "answer2"
     }
  ]
]

This structure of array is hold in state called question, I have tried to create new functional component and print it on user screen but I received the following error:

TypeError: quest[0].map is not a function

My target is to print Object0 and Object1 data.

const [question, setQuestion] = useState([]);
setQuestion([
  [
      {
       questions: "question1",
       answer1: "answer1",
       answer2: "answer2"
      },
      {
       questions: "question2",
       answer1: "answer1",
       answer2: "answer2"
      }
  ]
]);
//Component
const QuestionsComponent = function questions(){
    return (
        <div>
            {
                question.map(function (quest){
                    quest[0].map(function(ques){
                        return quest.questions;
                    })
                })
            }
        </div>
    );
}


 return(
   <>
    <QuestionsComponent />
   </>
 );

What is the correct approach to print array of objects inside of array?

Instead of defining the initial state as empty array, just pass the array you pass to setQuestion() to the useState(). Also you probably meant to pass question as a prop to QuestionsComponent — Yousaf
– Yousaf, Commented Sep 17, 2020 at 14:43
@Yousaf thats right, but It's not my full code, I receive the array of objects from functions that aren't related to this code. — Yotam Dahan
– Yotam Dahan, Commented Sep 17, 2020 at 14:44

David · Accepted Answer · 2020-09-17 14:50:26Z

2

When you map over question:

question.map(function (quest){

The quest variable will be each element of that array. Which in this case that element is:

[
  {
   questions: "question1",
   answer1: "answer1",
   answer2: "answer2"
  },
  {
   questions: "question2",
   answer1: "answer1",
   answer2: "answer2"
  }
]

An array of objects. So referencing an element of that array (such as quest[0]) would be:

{
   questions: "question1",
   answer1: "answer1",
   answer2: "answer2"
}

Which indeed isn't an array and has no .map().

It sounds like you wanted to map over quest, not an element of it:

quest.map(function(ques){
    return quest.questions;
})

Ultimately it looks like your variable naming is confusing you here. You have something called question which contains an array, each of which contains an array, each of which contains a property called questions. The plurality/singularity of those is dizzying.

Perhaps question should really be questionGroups? It's an array of arrays. Each "group" is an array of questions. Each of which should have a property called question.

Variable naming is important, and helps prevent confusion when writing your own code. So in this case it might be something like:

const [questionGroups, setQuestionGroups] = useState([]);

// then later...
questionGroups.map(function (questionGroup){
    questionGroup.map(function (question){
        return question.question;
    })
})

edited Sep 17, 2020 at 14:50

answered Sep 17, 2020 at 14:44

David

221k42 gold badges245 silver badges337 bronze badges

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

2 Comments

Yotam Dahan Over a year ago

When I use console.log it works, but once I use return it wont print on DOM, why is that? I used your code.

David Over a year ago

@YotamDahan: Looks like the outer map isn’t returning anything. Try putting a “return” before the inner call to map.

Ephrem Demelash · Accepted Answer · 2020-09-17 14:54:42Z

0

In short objects doesn't have .map() function.

Do this instead: question.map(function (quest){ return quest.questions; });

answered Sep 17, 2020 at 14:54

Ephrem Demelash

965 bronze badges

Collectives™ on Stack Overflow

Correct syntax of printing array objects inside array React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related