0

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>
Chloe
  • 13
  • 4
  • Have a look here. This is not a react specific problem. You should rather look for a solution on how to get data from excel files in javascript and try to apply the solution to what you already have: https://stackoverflow.com/questions/8238407/how-to-parse-excel-file-in-javascript-html5 – Andre Feb 20 '20 at 01:07

1 Answers1

0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Harshit Agarwal
  • 2,308
  • 2
  • 15
  • 23