ReactJs undefined error in Component and Reducer

Question

I'm having a "no-undef" issue in my ReactJs app, the console says:

Uncaught ReferenceError: equipment is not defined at Equipment line 18 and line 21.
Uncaught ReferenceError: identifier is not defined at Object../src/reducers/equipment.js (equipment.js:5)

This is the code I've written:

Component (..components/Equipment.js):

import React, { Component } from 'react';
import {connect} from 'react-redux';


class Equipment extends Component {
  render() {
    return (
      <div>
        {this.props.equipment.map(note => (
          <div className="card">
            <div className="card-header">
              Equipment
            </div>
            <div className="card-content">
              <table>
                <tbody>
                  <tr>
                    <td>{equipment.identifier}</td>
                  </tr>
                  <tr>
                    <td>{equipment.location}</td>
                  </tr>
                </tbody>
              </table>
              <button>edit</button><button>delete</button>
            </div>
          </div>
        ))}
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    equipment: state.equipment,
  }
}

const mapDispatchToProps = dispatch => {
  return {
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Equipment);

Reducer (..reducers/equipment.js):

const initialState = [
  {
    equipment:  [
      identifier: "My Machine 1",
      location: "My Location 1"
    ]
  }
];


export default function equipment(state=initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

Any idea of where's the error exactly? Thank you.

hawk · Accepted Answer · 2018-08-17 08:27:48Z

1

Fix your initial state, should be object not array:

const initialState = {
  equipment: [{
    identifier: "My Machine 1",
    location: "My Location 1"
  }]
}

Also change equipmentto note here:

<tr>
   <td>{note.identifier}</td>
 </tr>
 <tr>
   <td>{note.location}</td>
 </tr>

edited Aug 17, 2018 at 8:27

answered Aug 17, 2018 at 8:14

hawk

5,4082 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Giulia Over a year ago

Hi, thank you! Now there's no error in the component but there's still an error in the reducer. Console says "Uncaught ReferenceError: identifier is not defined at Object../src/reducers/equipment.js (equipment.js:4)" and also "unexpected use of 'location' on line 5- no-restricted-globals". What can it be?

hawk Over a year ago

@Giulia my bad, i fixed it, please copy again

Giulia Over a year ago

Thanks! it works! :) I suppose I should change the map function inside the component now, right?

hawk Over a year ago

Right, or if you need array, switch it to array. Look on my example it should work in old way

Giulia Over a year ago

I get the error Uncaught TypeError: this.props.equipment.map is not a function

|

Singh · Accepted Answer · 2018-08-17 08:14:22Z

0

Replace equipment with note inside Equipment.js

<tr>
   <td>{note.identifier}</td>
</tr>
<tr>
   <td>{note.location}</td>
</tr>

answered Aug 17, 2018 at 8:14

Singh

1,9883 gold badges22 silver badges31 bronze badges

Collectives™ on Stack Overflow

ReactJs undefined error in Component and Reducer

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related