Using Array.map in react.js

Question

I am having Uncaught TypeError: this.state.salaryDetails.map is not a function error while using map in react js. What may be the solution for this issue? Following below is the code:

import React, { Component } from 'react';
import httpBrowsing from './../../../utils/httpBrowsing';
import { NativeSelect, FormControl } from '@material-ui/core'



export class Salary extends Component {
constructor() {
    super();
    this.state = {
        salaryDetails: '',
        data: {
            employeeName: '',
            year: '',
            month: ''
        }
    }
}

handleChange = (e) => {
    const { name, value } = e.target;

    this.setState((pre) => ({
        data: {
            ...pre.data,
            [name]: value,
            employeeName: this.state.salaryDetails.filter((item) => item[name] === value)

        }


    }))

}


componentDidMount() {
    httpBrowsing.get('/addemployee', true)
        .then((data) => {
            this.setState({
                salaryDetails: data.data,

            })
        })
        .catch(err => {
            console.log("error", this.state);
            debugger;
        })

}


render() {
    console.log("what is this >>", this.state);
    console.log("finally>>", this.state);
    const { salaryDetails } = this.state;
    let Employ = this.state.salaryDetails.map((item, id) => <option key={id} value= 
    {item.name}>{item.name}</option>)
    return (
        <div>
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <label htmlFor="month">Month:</label>
                        <FormControl>
                            <NativeSelect defaultValue="" name="month" onChange= 
                            {this.handleChange}>
                                <option >Choose</option>
                                <option value="january">January</option>
                                <option value="february">February</option>
                                <option value="march">March</option>
                                <option value="april">April</option>
                                <option value="may">May</option>
                                <option value="june">June</option>
                                <option value="july">July</option>
                                <option value="august">August</option>
                                <option value="september">September</option>
                                <option value="october">October</option>
                                <option value="november">November</option>
                                <option value="december">December</option>
                            </NativeSelect>
                        </FormControl><br />
                    </div>
                    <div className="col-md-6">
                        <label htmlFor="year">Current Year:</label>
                        <FormControl>
                            <NativeSelect defaultValue="" name="Year" onChange= 
                          {this.handleChange}>
                                <option >Choose</option>
                                <option value="2020">2020</option>
                                <option value="2019">2019</option>
                                <option value="2018">2018</option>
                                <option value="2017">2017</option>
                                <option value="2016">2016</option>
                                <option value="2015">2015</option>
                            </NativeSelect>
                        </FormControl><br />
                    </div>
                </div>
                <div className="col-md-6">
                    <label htmlFor="Select Employee">Select Employee:</label>
                    <FormControl>
                        <NativeSelect defaultValue="" name="name" onChange= 
                         {this.handleChange}>
                            <option >Choose</option>
                            {Employ}
                        </NativeSelect>
                    </FormControl><br />
                </div>
            </div>
        </div >
     )
   }
 }

I tried to use option from database using native select of material UI,but error is shown.what may be the issue ?what may be the solution for the problem?How can i solve the issue? Please provide me a solution.

Answer 1

Looking at the constructor within the component, the salaryDetails state is initialised as an empty string, ''.

Array.map() can only be used on arrays. THerefore, you should be initialising your salaryDetails state as an empty array.

this.state = {
  salaryDetails: [],
  data: {
    employeeName: '',
    year: '',
    month: '',
  },
}