How to populate dropdown menu in React with entries from an excel file?

Question

So currently, this is what I have to populate my dropdown menu. I use React Hook Form to create my dropdown. Currently, the options are hard-coded, but I want to read data from an excel or cvs file and then populate my options from that data. I have googled but most show up as populate from json file. I want to populate from excel file. Thank you!

<h5 for="secondaryControls">Secondary controls-other </h5>
           <div className="float-left">
      {fields.map((field, idx) => {
        return (

          <div key={`${field}-${idx}`}>

          <select name="primaryControls" ref={register}>



<option value="Component3">->Link:  Lift /Transfer Seat </option>
<option value="Component4">->ASENTO – XL-SEAT:  Lift /Transfer Board</option>
    value={field.value}
              onChange={e => ChangeItem(idx, e)}
          </select>
&nbsp;&nbsp;&nbsp;
            <input
              type="text"
style={{width: "370px"}}
          value={field.value}

              onChange={e => ChangeItem(idx, e)}
            />
            <button type="button" onClick={() => RemoveDropDown(idx)}>
              X
            </button>  &nbsp;&nbsp;&nbsp;
<button type="button" onClick={() => NewDropDown()}>
        +
      </button>
          <br /><br />
        </div>
        );
      })}
    </div>

Answer 1

You need to first convert your excel file to a JSON. There are multiple libraries out there which will help you do that, one of them is convert-excel-to-json .

Once your file is converted to JSON, then you can easily loop over the object to create dropdown options.