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: '',
  },
}