react.js вывод данных из массива объектов

Question

Есть вот такой код

import React from 'react';

const Answers = (props) => {
    let answers = [ 
        {"answer": "По программе первичного инструктажа для работников рабочих профессий"},
        {"answer": "По программе вводного инструктажа"},
        {"answer": "Программа не требуется"},
        {"question": "Виды инструктажей, проводимые для рабочих профессий:"}
    ]
      
      let answersElements = answers.map((answers) => {
        return (
          <button className ='btn-answer'>{answers.answer}</button>
        )
      });
    
      let randomAns = ((answersElements) => {
        return answersElements.sort(() => Math.random() - 0.51);
      });
      
      let answerRandom = randomAns(answersElements)
        return (
            <div>
               {answerRandom}
            </div>
          
    );
}

export default Answers;

Надо что б выводились только answer, но выводиться 3 answer и 1 пустая кнопка. Как это пофиксить, уже всю голову сломал...

Answer 1

answers.map((answers) => {
        return (
          <button className ='btn-answer'>{answers.answer}</button>
        )
      });

В этом коде вы проходите по массиву из 4 элементов, в три из них вы записываете answers.answer, а в 4ый идет unefined, так как нет такого свойства в 4ом элементе, вот и получаете на выходе 4 штуки, одна из которых пустая

Answer 2

В итоге пришел к такому коду

import React from "react";

const Answers = (props) => {
  let questions= [
    {"id":1},
    {"answer": "По программе первичного инструктажа для работников рабочих профессий"},
    {"answer": "По программе вводного инструктажа"},
    {"answer": "Программа не требуется"},
    {"question": "Виды инструктажей, проводимые для рабочих профессий:"}]

  let answersElements = questions.map((questions) => {
    if (questions.answer)
      return <button className="btn-answer">{questions.answer}</button>;
  });

  let randomAns = (answersElements) => {
    return answersElements.sort(() => Math.random() - 0.51);
  };

  let answerRandom = randomAns(answersElements);
  return <div>{answerRandom}</div>;
};

export default Answers;

спасибо всем за помощь

БЛОГ НА HUSL

react.js вывод данных из массива объектов

Ответы (2 шт):