Making dynamic react select component, not getting desired results,

Question

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>
    </>
  );
};

Please try removing the <option> & </option> around {optionTemplate} and see if that helps. — jsN00b
– jsN00b, Commented Mar 28, 2022 at 13:18

c6p · Accepted Answer · 2022-03-28 13:22:21Z

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="react"></div>

Collectives™ on Stack Overflow

Making dynamic react select component, not getting desired results,

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related