Me han pedido que cree una página de preguntas frecuentes con un estilo de chatbot. La forma en que estoy tratando de hacer esto es creando un elemento de párrafo con algún texto como "¡Hola, hazme una pregunta!" con cinco botones seguidos debajo que contienen las preguntas frecuentes. La idea es que el usuario pueda hacer clic en uno de los botones y revelar la respuesta a la pregunta en un nuevo elemento de párrafo y las preguntas "sin respuesta" restantes deberían aparecer en una fila de botones debajo de eso.

Hasta ahora solo he logrado crear una página de estilo acordeón donde las preguntas están en una columna y la respuesta se revela cuando se hace clic en ellas. Esto funciona, pero realmente me gustaría tratar de cumplir con mis instrucciones y obtener una mejor comprensión de React al mismo tiempo. Mi código actual está a continuación. ¡Cualquier ayuda sería apreciada!

 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;