How can I get the setState({temp2}) to iterate over the array instead of putting the whole array into the dropdown field?

How can I get the setState({temp2}) to iterate over the array instead of putting the whole array into the dropdown field?
0
import React, { Component } from 'react'
import Table from 'react-bootstrap/Table'
import ReactFileReader from 'react-file-reader'

export default class TableMap extends Component {
    // constructor(props) {
    //     super(props);
    //     this.updateData = this.updateData.bind(this);
    // }
    state = {
        iGorMap: [


            {
                "FiduciaryOutsourcingField": "ID",
                "YourField": ""
            },
            {
                "FiduciaryOutsourcingField": "CreateDate",
                "YourField": ""
            },
            {
                "FiduciaryOutsourcingField": "UpdateDate",
                "YourField": ""
            },
            {
                "FiduciaryOutsourcingField": "RecordStatus",
                "YourField": ""
            },
            {
                "FiduciaryOutsourcingField": "Source",
                "YourField": ""
            },
           


        ]
    }


    renderDropdownValues() {

        function convertJson(csvData) {
            var temp = csvData.split("\n");
            var temp2 = temp[0].split(",");
            return temp2;
        }


    }
    renderTableData() {
        return this.state.iGorMap.map((iGorMap, index) => {
            const { FiduciaryOutsourcingField, YourField } = iGorMap //destructuring
            return (
                <tr key={FiduciaryOutsourcingField}>
                    <td>{FiduciaryOutsourcingField}</td>
                    <td>
                        <div className="dropdown" role="combobox" >
                            <select className="browser-default custom-select">
                                {/* <option selected>{this.state.csvData}</option> */}
                                {this.renderDropdownValues()}
                                <option>{this.state.temp2}</option>
                            </select>
                        </div>
                    </td>
                </tr >
            )
        })
    }
    renderTableHeader() {
        let header = Object.keys(this.state.iGorMap[0])
        return header.map((key, index) => {
            return <th className="tableHeader" key={index}>{key}</th>
        })
    }

    render() {
        return (
            <div>
                <ReactFileReader
                    multipleFiles={false}
                    fileTypes={[".csv"]}
                    handleFiles={this.handleFiles}
                >
                    <button type='button' className="btn btn-success">Upload</button>
                </ReactFileReader>
                <Table bordered hover striped>

                    <thead className="thead-dark" id="top">
                        <tr>
                            {this.renderTableHeader()}
                        </tr>
                    </thead>
                    <tbody>
                        {this.renderTableData()}
                    </tbody>
                </Table>
            </div>
        )
    }
    handleFiles = files => {
        var reader = new FileReader();
        var temp2;
        reader.onload = e => {
            // Use reader.result
            var filein = reader.result;
            var temp = filein.split("\n");
            temp2 = temp[0].split(",");
            // var tempArr = temp2.split(",")


            this.setState({
                temp2
            });
        };
        reader.readAsText(files[0]);
        console.log(temp2);
    };


};

The handleFiles function at the bottom is what is giving me the most trouble. I need to display each item in the temp2 array in its own option in the drop down select box. Any Help would be greatly appreciated.

It would be great if you provided a link to your code online on a site like Codepen.io, jsFiddle.net or codesandbox.io. That way, we don’t have to recreate your project (i.e. install dependencies) just to help you out.

Hey RandellDawson I understand and agree and here you go. https://codesandbox.io/s/cocky-https-sy36l?fontsize=14

I figured out how to do it. I had to create a state for the options and then set that state and update it by cycling through the keys of the options and printing those out.

renderDropdownValues() {
    // document.getElementsByName("option").setAttribute("selected")

    return this.state.dropOpt.map((key, index) => {
      // console.log(this.state.FiduciaryOutsourcingField); //! Do Not use creates Infinite loop
      if (key === this.state.FiduciaryOutsourcingField) {
        console.log("I got here");
        return (
          <option selected key={index} id={index} className={key}>
            {key}
          </option>
        );
      }
      return (
        <option key={index} id={index} className={key}>
          {key}
        </option>
      );
    });
  }

  //* handleFiles transforms the incoming CSV sheet and returns the header from the first row
  handleFiles = files => {
    var reader = new FileReader();
    var parseConfig = {
      delimiter: "", // auto-detect
      newline: "", // auto-detect
      quoteChar: '"',
      escapeChar: '"',
      header: true,
      transformHeader: undefined,
      dynamicTyping: false,
      preview: 0,
      encoding: "",
      worker: false,
      comments: false,
      step: undefined,
      complete: undefined,
      error: undefined,
      download: false,
      skipEmptyLines: true,
      chunk: undefined,
      fastMode: undefined,
      beforeFirstChunk: undefined,
      withCredentials: undefined,
      transform: undefined,
      delimitersToGuess: [",", "\t", "|", ";", Papa.RECORD_SEP, Papa.UNIT_SEP]
    };

    //* All configuration options for "unparsing" JSON back to CSV
    //TODO: unparseConfig not currently used will need to use in full production.
    // var unparseConfig = {
    //   quotes: false, //or array of booleans
    //   quoteChar: '"',
    //   escapeChar: '"',
    //   delimiter: ",",
    //   header: true,
    //   newline: "\n",
    //   skipEmptyLines: true, //or 'greedy',
    //   columns: null //or array of strings
    // };

    //* reads incoming CSV file within the browser and parses the header of the first row
    reader.onload = e => {
      var fileIn = reader.result;
      var fileInParsed = fileIn.replace(/(00\/00\/0000)/g, ""); // Removing 00/00/00 dates
      var csvData = Papa.parse(fileInParsed, parseConfig);

      //* csvData.data is the grouping of Objects
      var dataJson = csvData.data;
      var jsonKeys = Object.keys(dataJson[0]);
      // console.log(dataJson[0]); //for debugging
      // console.log(csvData.data.length); //for debugging
      // console.log(jsonKeys); //for debugging

      //* breaks out the key and index of the jsonKeys array
      return jsonKeys.map((key, index) => {
        // console.log("I got here"); //for debugging
        // console.log(key, index); //for debugging
        return this.setState({
          dropOpt: jsonKeys
        });
      });
    };
    reader.readAsText(files[0]);
  };