I want to render a dynamic select/dropdown which I will fetch from an api as a template, I'm trying to pass on dynamic data to react select statement, still not getting exact response. I want to display n number of dropdown, which be received from an api. Label of the dropdown will server as a question and options will be the answers. Can someone help me figure out what shall be correct approach. Below is my functional component for the same. Thanks!
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>
</>
);
};
You have multiple survey questions, you need to have 2 components. SurveyDropdown for a single question. And an outer component containing multiple dropdowns.
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>