CODEWITHSUNDEEP
reactjsreact-redux
Giulia
Giulia

Reputation: 807

ReactJs undefined error in Component and Reducer

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

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.

Upvotes: 0

Views: 246

Answers (2)

hawk
hawk

Reputation: 5408

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>

Upvotes: 1

Singh
Singh

Reputation: 1988

Replace equipment with note inside Equipment.js

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

Upvotes: 0

Related Questions