Quiero representar una selección/desplegable dinámica que obtendré de una API como plantilla, estoy tratando de transmitir datos dinámicos para reaccionar a la declaración de selección, pero aún no obtengo una respuesta exacta. Quiero mostrar n número de menús desplegables, que se reciben de una API. La etiqueta del menú desplegable se mostrará como una pregunta y las opciones serán las respuestas. ¿Puede alguien ayudarme a averiguar cuál será el enfoque correcto? A continuación se muestra mi componente funcional para el mismo. ¡Gracias!
export const SurveyDropdown = () => { const [selectedSurvey, setselectedSurvey] = useState(); //default value function handleSelectChange(event) { setselectedSurvey(event.target.value); } console.log(selectedSurvey) const surveyData = [ { id: 1, surveyQuestion: "Question One", type: "dropdown", option: ["optionOne", "optionTwo", "optionThree"], }, { id: 2, surveyQuestion: "Question Two", type: "dropdown", option: ["optionOne", "optionTwo", "optionThree"], }, { id: 3, surveyQuestion: "Question Three", type: "button", option: ["optionOne", "optionTwo", "optionThree"], }, ]; let optionTemplate = surveyData.map(surveyData => ( <option value={surveyData.option} key={surveyData.surveyQuestion}>{surveyData.option.values}</option> )); console.log(optionTemplate); return ( <> <FloatingLabel controlId="floatingSelect" label="This is question" value={selectedSurvey} onChange={handleSelectChange} > <Form.Select aria-label="Floating label select example"> <option>{optionTemplate}</option> </Form.Select> </FloatingLabel> </> ); };Tiene múltiples preguntas de encuesta, necesita tener 2 componentes. SurveyDropdown para una sola pregunta. Y un componente externo que contiene múltiples dropdown .
const {useState} = React; const { FloatingLabel, Form } = ReactBootstrap; const SurveyDropdown = (props) => { //default value const [selectedOption, setSelectedOption] = useState(); function handleSelectChange(event) { setSelectedOption(event.target.value); } return ( <React.Fragment> <FloatingLabel controlId="floatingSelect" label={props.surveyQuestion} > <Form.Select onChange={handleSelectChange}> {props.option.map(o => <option key={o} value={o} selected={o==selectedOption}>{o}</option> )} </Form.Select> </FloatingLabel> </React.Fragment> ); }; const Survey = ({data}) => { return ( <React.Fragment> {data.map(question => <SurveyDropdown key={question.id} {...question} /> )} </React.Fragment> ); } const surveyData = [ { id: 1, surveyQuestion: "Question One", type: "dropdown", option: ["optionOne", "optionTwo", "optionThree"], }, { id: 2, surveyQuestion: "Question Two", type: "dropdown", option: ["optionOne", "optionTwo", "optionThree"], }, { id: 3, surveyQuestion: "Question Three", type: "button", option: ["optionOne", "optionTwo", "optionThree"], }, ]; // Render it ReactDOM.render( <Survey data={surveyData} />, document.getElementById("react") ); <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.2.2/react-bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div id="react"></div>