How to map an array of objects when one of the objects is empty?

Question

I'm basically creating a bootleg amazon clone and I'm working on the Questions & Answers component. In my dummyData, it's possible for a product to have no questions therefore, no answers. This creates a problem for when I map my questions and answers in react. I looked at similar posts regarding this but I believe my situation is a bit different. I tried defaulting to an empty array but that didn't work for me.

DummyData.js
const dummyData = [
{
    productId: 100,
    questions: [{
      questionId: 10,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 500,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 501,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 502,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 503,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 11,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 504,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 505,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 506,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 507,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 12,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 508,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 509,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 510,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 511,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 13,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 512,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 513,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 514,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 515,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 14,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 516,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 517,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 518,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 519,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    },
    {
      questionId: 15,
      helpfulCount: 67,
      body: 'Is this watch waterproof?',
      answers: [{
        answerId: 520,
        body: 'This works up to 5 meters underwater.',
        user: 'User231',
        photo: {
          photoBody:'Here are some photos of the waterproof watches:',
          images: ['some link'],
          photoHelpfulCount: 33
        },
        helpfulCount: 43,
        date: 'May 1, 2019',
        isSeller: true,
        isReported: false
    },
    {
      answerId: 521,
      body: `To a degree, I wouldn't test it out.`,
      user: 'User420',
      photo: {
        photoBody:'',
        images: [],
        photoHelpfulCount: -1
      },
      helpfulCount: 0,
      date: 'May 3, 2019',
      isSeller: true,
      isReported: false
    },
    {
      answerId: 522,
      body: 'I tested it out 7ft underwater and so far so good.',
      user: 'User367',
      photo: {
        photoBody:'Here is a photo of my watch underwater:',
        images: ['some link'],
        photoHelpfulCount: 5
      },
      helpfulCount: 8,
      date: 'May 6, 2019',
      isSeller: true,
      isReported: false
    },
    { 
      answerId: 523,
      body: 'Tried it out at a water park and it stopped working.',
      user: 'User514',
      photo: {
        photoBody:'Here are some photos of the aftermath:',
        images: ['some link'],
        photoHelpfulCount: 2
      },
      helpfulCount: 4,
      date: 'May 1, 2019',
      isSeller: true,
      isReported: false
    }],
    }
  ]      
}, // etc. etc.
{ // this creates the problem so I commented it out and mapped every 0 index as you will see
    productId: 105,
    questions: [{}]      
},
];

Questions.jsx
import React from 'react';
import Question from './Question.jsx';
import Answer from './Answer.jsx';

const Questions = ({questionList}) => {

return (
  <div>   
    {questionList.map(productObj => (
    <div key={productObj.productId}>
      <Question 
      questionObj={productObj.questions[0]}
      updatedDataList={questionList}
      /> 
      <Answer 
      answerObj={productObj.questions[0].answers[0]} 
      updatedDataArr={questionList}
      />
    </div>
    ))}  
    {console.log(questionList)} 
  </div>  
  );
};

export default Questions;

index.jsx :
import React, { useState, useEffect } from 'react';
import Questions from './Questions.jsx';
import SearchBar from './SearchBar.jsx';
import AddQuestion from './AddQuestion.jsx';
import MoreAnsweredQuestions from './MoreAnsweredQuestions.jsx';
import dummyData from './dummyData.js';

const QuestionsAndAnswers = () => { 

  const [questions, setQuestions] = useState([]);

  useEffect(() => {
    setQuestions(dummyData)
  }, [])

  const handleSearchQuestion = query => {
    if (query.length < 3) {
      setQuestions(dummyData);
    } else {
      const searchResult = questions.filter(question => question.body.includes(query));
      setQuestions(searchResult);
    }
  };

  return (
    <div>
      <h2>Questions & Answers</h2>
      <SearchBar searchQuestion={(query) => handleSearchQuestion(query)}/>
      <Questions questionList={questions} />
      <MoreAnsweredQuestions />
      <AddQuestion />
    </div>
  );
};

export default QuestionsAndAnswers;

I don't see questionList anywhere in your example data. You can't destructure questionList if your data doesn't have a questionList key. — Charlie Bamford
– Charlie Bamford, Commented Aug 25, 2021 at 21:38
You have to write code that handles the fact that there may be no object given. So questionList.map(productObject => (if (productObject?.productId) { ... } else { <div class="no-qa">No Questions Asked</div> }); or whatever. — Heretic Monkey
– Heretic Monkey, Commented Aug 25, 2021 at 21:50
what does the ? in productObject?.productId mean? That doesnt seem to be a ternary operator. — Ronny Fitzgerald
– Ronny Fitzgerald, Commented Aug 25, 2021 at 21:54
It says if there isn't a productObject, exit with undefined. It's not a ternary. It's optional chaining — Charlie Bamford
– Charlie Bamford, Commented Aug 25, 2021 at 22:15

Chuck · Accepted Answer · 2021-08-25 21:36:14Z

1

You gave default value as [{}]

Try to set it as [].

The difference is that [{}] is not an empty array.

answered Aug 25, 2021 at 21:36

Chuck

8147 silver badges19 bronze badges

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

2 Comments

Ronny Fitzgerald Over a year ago

I'm confused, isn't that not consistent to how I've established questions? As an array of objects

Chuck Over a year ago

Your data is too long to see which is the part you are talking about. I just saw the last line was [{}]. I thought this was meant to give an empty array gave you the answer. Empty array should not be looped, but [{}] results in one loop.

Collectives™ on Stack Overflow

How to map an array of objects when one of the objects is empty?

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