How to dynamically add items to option in select tag (dropdown) in React

Question

I am making a dynamic form component which takes input from the user and stores it in JSON format and then creates a form for the end-user. I have to dynamically add values to select tag options but one error is coming TypeError: data.emplist is not iterable

const addNewEmp=()=>{
      61 |     setEmpList((data)=>({
      62 |         inputValue: '',
    > 63 |         emplist: [
         | ^  64 |             ...data.emplist,
      65 |             {
      66 |                 empName: data.inputValue

I have done several changes but cant figure out whats wrong. My code Below

import React, { useState } from 'react'

const Select = () => {
    const [inputValue,setInputValue] = useState('')
    const [emplist, setEmpList] = useState([
        {
            empName: '---Select---'
        }
    ]);


  const  addNewEmp=()=>{
      setEmpList((data)=>({
          inputValue: '',
          emplist: [
              ...data.emplist,
              {
                  empName: data.inputValue
              }
          ]
      }))
  }

      let empRecords = emplist.map((data) => {
        return <option>{data.empName}</option>;
      });

    return (
      <>
       
        <input
          type="text"
          placeholder="add options"
          onChange={(e)=> setInputValue(e.target.value)}
        />
         <button onClick={addNewEmp}>Add +</button>
        <br />
         <select>{empRecords}</select>
         {inputValue}
       
      </>
    );
}

export default Select

What is your data type of data.emplist? Object or array?

Martin TT
– Martin TT

2022-06-10 07:50:07 +00:00
Commented Jun 10, 2022 at 7:50 — Martin TT
– Martin TT, Commented Jun 10, 2022 at 7:50
data type is Object

Gaurav
– Gaurav

2022-06-10 07:58:36 +00:00
Commented Jun 10, 2022 at 7:58 — Gaurav
– Gaurav, Commented Jun 10, 2022 at 7:58

Amin NAIRI · Accepted Answer · 2022-06-10 09:36:23Z

You addEmpList function is overriding the old value of your empList which started as an Array with an Object. This is why you are getting this error because after you add a new item you cannot iterate over it anymore since Object do not have a definition of the Symbol.iterator as the Array does. Meaning you cannot iterate over an object.

If you want to dynamically add a new item to a select in React as stated in your question, you should be storing the result of your input change in a state, and whenever you need to (like a form submit), you can add this item in an array of items that will contain the dynamic options that will get rendered by React whenever this state change.

import React, {useState, useCallback} from "react";

const Select = () => {
  const [options, setOptions] = useState([]);
  const [text, setText] = useState("");
  const [value, setValue] = useState("");

  const handleTextChange = useCallback(changeEvent => {
    setText(changeEvent.currentTarget.value);
  }, [setText]);

  const handleValueChange = useCallback(changeEvent => {
    setValue(changeEvent.currentTarget.value);
  }, [setValue]);

  const handleSubmit = useCallback(submitEvent => {
    submitEvent.preventDefault();

    setOptions([
      ...options,
      {
        key: window.crypto.randomUUID(),
        text,
        value
      }
    ]);
  }, [text, value, options, setOptions]);

  return (
    <>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="text">
            Text
          </label>
          <input id="text" type="text" value={text} onChange={handleTextChange} />
        </div>
        <div>
          <label htmlFor="value">
            Value
          </label>
          <input id="value" type="text" value={value} onChange={handleValueChange} />
        </div>
        <button type="submit">
          Add
        </button>
      </form>
      <select>
        {options.map(currentOption => (
          <option key={currentOption.key} value={currentOption.value}>
            {currentOption.text}
          </option>
        ))}
      </select>
    </>
  );
};

export default Select;

Ravi · Accepted Answer · 2022-06-10 08:05:39Z

0

No need to write data.emplist or data.inputValue, you can directly access those things

setEmpList((data)=>({
      inputValue: '',
      emplist: [
          ...emplist,
          {
              empName: inputValue
          }
      ]
  }))

answered Jun 10, 2022 at 8:05

Ravi

35.7k22 gold badges126 silver badges188 bronze badges

1 Comment

Gaurav Over a year ago

I tried this also but it also throws errors. TypeError: emplist.map is not a function @Ravi

Gaurav · Accepted Answer · 2022-06-13 04:54:38Z

Answer

import React, {useState } from "react";
    
    const Select = () => {
      const [inputValue, setInputValue] = useState("");
    
      const [emplist, setEmpList] = useState([]);
    
      let empRecords =
        emplist.length > 0 &&
        emplist.map((data) => {
          return (
            <option value={data.empName} key={data.empName}>
              {data.empName}
            </option>
          );
        });
    
      const addNewEmp = () => {
        const addItems = {
          empName: inputValue,
          value: inputValue,
        };
    
        const addEmp = [...emplist];
        addEmp.push(addItems);
        setEmpList(addEmp);
      };
    
      return (
        <>
          <input
            type="text"
            placeholder="add options"
            onChange={(e)=> setInputValue(e.target.value)}
          />
          <button onClick={addNewEmp}>Add +</button>
          <br />
          <select>{empRecords}</select>
          {inputValue}
        </>
      );
    };
    
    export default Select;

Collectives™ on Stack Overflow

How to dynamically add items to option in select tag (dropdown) in React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related