Display items from array in select box react-CodePudding

I am working on an application where I am taking data(array of sectors) from firestore database and adding this array to select box options. My problem is that I can't properly display each item in a separate option, instead my entire array is displayed in one line in the select box option. a screenshot of what my application looks like with the described problem.

Parts of the code responsible for getting an array from the database and displaying it in the select box options:

const [allSectors, setAllSectors] = useState([]);

useEffect(() => {
    getSectors();
  }, []);

  const getSectors = async () => {
    const data = await UserDataService.getAllSectorsData();
    setAllSectors(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };

  const FormSelect = () => {
    return allSectors.map((sector) => (
      <option key={sector.id} value={sector.id}>
        {sector.Manufacturing}
      </option>
    ));
  };

return (
    <>
   <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3" controlId="formUserSector">
         <InputGroup>
            <InputGroup.Text id="formUserSector">Sectors: </InputGroup.Text>
               <Form.Select size="sm" onChange={(e) => setSectors(e.target.value)}>
                {FormSelect()}
              </Form.Select>
         </InputGroup>
      </Form.Group>
   </Form>
   </>
)

CodePudding user response：

Not sure which UI library you are using. The first thing I noticed is that you use <option> tag without surrounding it with <select> tag

  <option key={sector.id} value={sector.id}>
    {sector.Manufacturing}
  </option>

I'm assuming you are trying to implement HTML <select> dropdown. I think if you use only tags without surrounding it with it will just return strings, which is what happening in your example.

Try changing your FormSelect function to something like this:

const FormSelect = () => {
    return (
        <select>
            {allSectors.map((sector) => (
                <option key={sector.id} value={sector.id}>
                    {item}
                </option>
            ))}
        </select>
    );
};

EDIT 1

From your comments, I noticed that your sector.Manufacturing is an array, but it should be a string. When you put an array inside option like this <option>{array}</option> your get all the array values squashed into one <option> tag.

try also looping over sector.Manufacturing rather than allSector. Hard to solve without seeing the full code, but it might look something like this:

    const FormSelect = () => {
    return (
        <select>
            {allSectors.map((sector) => (
                <option key={sector.id} value={sector.id}>
                    {sector.Manufacturing.map((item) => {
                        return item;
                    })}
                </option>
            ))}
        </select>
      );
   };

EDIT 2 Try this:

const FormSelect = () => {
    return (
        <select>
            {allSectors.map((sector) =>
                sector.Manufacturing.map((item, i) => {
                    return (
                        <option key={i} value={item}>
                            {item}
                        </option>
                    );
                })
            )}
        </select>
    );
};