ReactJS throws “map” is not defined Error

Question

I am not very familiar with JavaScript, but have to implement a table in ReactJS for my current project. At the part bellow I get an error: map is not defined . I have done some Error-Research but could not find an satisfying answer here or on Google.

   render() {
        const { hits } = this.props
        return (
            <div style={{width: '100%', boxSizing: 'border-box', padding: 8}}>
                <table className="sk-table sk-table-striped" style={{width: '100%', boxSizing: 'border-box'}}>
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Author</th>
                            <th>Keywords</th>
                        </tr>
                    </thead>
                    <tbody>
            {map(hits, hit => (
              <tr key={hit._id}>
                <td>{hit._source.title}</td>
                <td>{hit._source.year}</td>
                <td>{hit._source.imdbRating}</td>
              </tr>
            ))}
          </tbody>
                </table>
            </div>
        )
    }

Could someone point me in the right direction?

Answer 1

You have to use the map function on the hits const you create at the top. Like this:

{hits.map(hit => (
  <tr key={hit._id}>
    <td>{hit._source.title}</td>
    <td>{hit._source.year}</td>
    <td>{hit._source.imdbRating}</td>
  </tr>
))}

Answer 2

map is a function defined on the Array prototype in javascript. You are calling map here on the global object, which does not have that method defined. Thus, you get an undefined error.

hits.map is probably what you are looking for.

Answer 3

Is your example from http://docs.searchkit.co/v2.0.0/components/basics/hits.html

In this case You need declare map ... Put :

import { map } from 'lodash'

at begining of your file , after import {....} from 'searchkit'