CODEWITHSUNDEEP
javascriptreactjsmappingsearchkit
Jones1220
Jones1220

Reputation: 786

ReactJS throws "map" is not defined Error

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?

Upvotes: 0

Views: 636

Answers (3)

user3580686
user3580686

Reputation: 81

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'

Upvotes: 0

Sunny Wong
Sunny Wong

Reputation: 96

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.

Upvotes: 1

weibenfalk
weibenfalk

Reputation: 892

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>
))}

Upvotes: 1

Related Questions