FAQ component - React template

faq-component-react-template.markdown

FAQ component - React template

A Pen by nappan23 on CodePen.

License.

index.html

<div id="app">
</div>

script.babel

/*
* https://frontendeval.com/questions/faq-component
*
* Create a re-usable "Frequently Asked Questions" component
*/

const FAQ = [
  {
    question: "How many bones does a cat have?",
    answer: "A cat has 230 bones - 6 more than a human",
  },
  {
    question: "How much do cats sleep?",
    answer: "The average cat sleeps 12-16 hours per day",
  },
  {
    question: "How long do cats live",
    answer: "Outdoor cats live 5 years on average. Indoor cats live 15 years on average.",
  },
];

let FAQComponent = ({ questions }) => {             
  return (
    <div className="container">
      <h1>Frequently asked questions</h1>
        {questions.map((question) => (
          <div class="togglebox" onClick="console.log('hello');">
            <div class="questionbox">
              <a href="#" class="triangle-bottom"></a>
              <span class="question">{question.question}</span>
            </div>
            <div className="answer-visible">{question.answer}</div>
          </div>
        ))}
    </div>
  );      
}


const App = () => {
  return <FAQComponent questions={FAQ} />;
}

ReactDOM.render(<App />, document.getElementById('app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

style.css

.answer-invisible {
  visibility: hidden;
  height: 0;
  padding-left: 20px;
}
.answer-visible {
  padding-left: 30px;
  visibility: visible;
  height: auto;
  color: gray;
}

/*
reference: https://ayaka-weblog.com/programming/html-css-programming/css-arrow-icon/
*/
.triangle-left {
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent black;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
}

.triangle-bottom {
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: black transparent transparent transparent;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
}

.question {
  padding-left: 10px;
  vertical-align: middle;
}

.togglebox {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}

h1 {
  padding-left: 10px;
}