Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Steps to populate dynamic dropdown from API in React

I am trying to build a dropdown from the data returned in API response. The API response looks like this:

{"departments": ["Admin","HR","IT","OPS","Accounts"]}

The retrieval is being in this manner. I need help in accessing the data in the form of a dropdown within <div>


import React, { useState, useEffect } from 'react'
import Select from 'react-select';

function Dropdown() {

  const [data, setData] = useState([{}])

  useEffect(() => {
    fetch("/listDepartments").then(
      response => response.json()
    ).then(
      data => {
        setData(data)
        console.log(data)
      }
    )
  }, [])

  return (
    <div>
     <Select options={data.departments} />
    </div>
  )
}
export default Dropdown;

Error
Cannot use ‘in’ operator to search for ‘options’ in Admin
TypeError: Cannot use ‘in’ operator to search for ‘options’ in Admin

Tags:

3

Answers


  1. 0

    try this:

    function Dropdown() {
  // here, just default it to `[]`
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/listDepartments")
      .then((response) => response.json())
      .then((data) => {
        // put the departments data in the state
        setData(data.departments);
        console.log(data.departments);
      });
  }, []);

  return (
    <div>
      {/* now you can map like this */}
      <select id="select">
        {data.map((e) => (
          <option key={e} value={e}>
            {e}
          </option>
        ))}
      </select>
    </div>
  );
}
export default Dropdown;

    If you want a real dropdown, well you have to do write it from scratch or try to use https://ui.shadcn.com/docs/components/dropdown-menu

    Login or Signup to reply.
  2. 0

    Array.map() is supposed to take an Array. It would help to see what the code looks like, that gave you this error. From the error message i assumeyou are using it like data.map() so you are giving it an object.

    I propose:

    function Dropdown() {

  const [data, setData] = useState([]) //just take an array in the state

  useEffect(() => {
    fetch("/listDepartments").then(
      response => response.json()
    ).then(
      data => {
        setData(data.departments) //get the arrey from key departments
        console.log(data)
      }
    )
  }, [])

  return (
    <div>
      <select name="departement">
          {data.map((value) => {
              return (
                  <option key={value} value={value}> 
                      {value} 
                  </option>
              )
          })}
        </select>
    </div>
  )
}
export default Dropdown;
    Login or Signup to reply.
  3. 0

    I’ve included a link to the documentation. Please follow the
    instructions in the document. If you need to create a dropdown, ensure
    that the array contains an array of objects.
    enter link description hereenter link description here

    import React, { useState, useEffect } from 'react';
import Select from 'react-select';

function Dropdown() {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    fetch("/listDepartments")
      .then(response => response.json())
      .then(data => {
        const departments = data.departments.map(department => ({
          label: department,
          value: department
        }));
        setOptions(departments);
        console.log(departments);
      });
  }, []);

  return (
    <div>
      <Select options={options} />
    </div>
  );
}

export default Dropdown;

    In this code:

    • The options state now holds an array of objects, where each object
      has label and value properties containing the department name.
    • Inside the useEffect hook, we map over the array of department names
      (data.departments) and create objects with label and value
      properties.
    • We then set the transformed array of objects as the options state.
    • Finally, we pass the options state to the Select component as the
      options pro
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search