I've been asked to create a FAQ page with a chatbot style. The way I'm trying to do this is by creating a paragraph element with some text along the lines of "Hello, ask me a question!" with five buttons in a row underneath containing the FAQs. The idea is that the user should be able to click on one of the buttons and reveal the answer to the question in a new paragraph element and the remaining 'unanswered' questions should appear in a row of buttons below that.

So far I've only managed to create an accordion style page where the questions are in a column and the answer is revealed when they're clicked on. This works but I'd really like to try to meet my brief and get a better understanding of React at the same time. My current code is below - any help would be appreciated!

import React, { useState } from 'react';
import classes from './Chat.module.css';
import { Container, Row, Col } from 'react-bootstrap';


const ChatItem = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const clickHandler = () => {
    setIsOpen(true);
    console.log(isOpen);
  };

  return (
    <Container>     
      <Row md={5}>
        <button className={classes.conversation_btn} onClick={clickHandler}>
          {props.question}
        </button>
      </Row>

      <Row>
        <Col mdPush={7} md={5}>
          <div
            className={`${classes.text_box} ${
              isOpen ? classes.open : classes.closed
            }`}
          >
            {props.answer}
          </div>
        </Col>
      </Row>
    </Container>
  );
};


const ChatList = (props) => {
  return (
    <div>
      {props.items.map((item) => (
        <ChatItem
          key={item.id}
          id={item.id}
          question={item.question}
          answer={item.answer}
        />
      ))}
    </div>
  );
};

export default ChatList;