Shopping cart project

Tell us what’s happening:
Receiving error below.

Error I am receiving::::::::::::::::
×

←→1 of 2 errors on the page

TypeError: Cannot read property ‘counters’ of null

Counters.render

C:/Users/Megha/counter-app/src/components/counters.jsx:8

   5 | render() {   6 |   return (   7 |     <div>>  8 |       <button     | ^   9 |         onClick={this.props.onReset}  10 |         className="btn btn-primary btn-sm m-2"  11 |       >

View compiled

:arrow_forward: 23 stack frames were collapsed.

Module…/src/index.js

C:/Users/Megha/counter-app/src/index.js:9

   6 | import "bootstrap/dist/css/bootstrap.css";   7 | import Counters from "./components/counters";   8 | >  9 | ReactDOM.render(<Counters />, document.getElementById("root"));  10 | 

View compiled

webpack_require

C:/Users/Megha/counter-app/webpack/bootstrap:782

  779 | };  780 |   781 | // Execute the module function> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  783 |   784 | // Flag the module as loaded  785 | module.l = true;

View compiled

fn

C:/Users/Megha/counter-app/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

View compiled

0

http://localhost:3000/static/js/main.chunk.js:458:18

webpack_require

C:/Users/Megha/counter-app/webpack/bootstrap:782

  779 | };  780 |   781 | // Execute the module function> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  783 |   784 | // Flag the module as loaded  785 | module.l = true;

View compiled

checkDeferredModules

C:/Users/Megha/counter-app/webpack/bootstrap:45

  42 | 	}  43 | 	if(fulfilled) {  44 | 		deferredModules.splice(i--, 1);> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  46 | 	}  47 | }  48 | return result;

View compiled

Array.webpackJsonpCallback [as push]

C:/Users/Megha/counter-app/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);  30 |   31 | 	// run deferred modules when all chunks ready> 32 | 	return checkDeferredModules();     | ^  33 | };  34 | function checkDeferredModules() {  35 | 	var result;

View compiled

(anonymous function)

http://localhost:3000/static/js/main.chunk.js:1:57

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Your code so far**********************************************************


Counter.jsx file

import React, { Component } from "react";
import counters from "./Counters";

class Counter extends Component {
  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.props.onIncrement(this.props.counter)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.props.counter.value === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { value } = this.props.counter;
    return value === 0 ? "Zero" : value;
  }
}

export default Counter;
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''""""""""""""""""""""""""""""""""""""""""""""""""""""""

Counter.jsx file

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.props.onReset}
          className="btn btn-primary   btn-sm m-2"
        >
          Reset
        </button>
        {this.props.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.props.onDeleteDelete}
            onIncrement={this.props.onIncrement}
            counter={counter}
          />
        ))}
      </div>
    );
  }
}

export default Counters;
  """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

App.js file

import React, { Component } from "react";
import NavBar from "./components/navbar";
import "./App.css";

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleIncrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    console.log(this.state.counters[0]);
    this.setState({ counters });
  };

  handleReset = () => {
    this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
  };
  handleDelete = counterId => {
    const counters = this.state.counters.filter(c => c.id != counterId);
    this.setState({ counters: counters });
  };
  render() {
    return (
      <React.Fragment>
        <NavBar />
        <main className="container" />
        <Counters
                  counters={this.state.counters}
                  onReset={this.handleReset}
                  onIncrement={this.handleIncrement}
                  onDelete={this.handleDelete} />
      </React.Fragment>
    );
  }
}

export default App;





// View a more complex version of this project with custom toolbar here: https://codepen.io/no_stack_dub_sack/pen/JbPZvm?editors=0110

// coded by @no-stack-dub-sack (github) / @no_stack_sub_sack (codepen)

const projectName = "markdown-previewer";
localStorage.setItem('example_project', 'Markdown Previewer');

// ALLOWS LINE BREAKS WITH RETURN BUTTON
marked.setOptions({
  breaks: true,
});

// INSERTS target="_blank" INTO HREF TAGS (required for codepen links)
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
  return `<a target="_blank" href="${href}">${text}` + '</a>';
}

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state =  {
      markdown: placeholder,
      editorMaximized: false,
      previewMaximized: false
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleEditorMaximize = this.handleEditorMaximize.bind(this);
    this.handlePreviewMaximize = this.handlePreviewMaximize.bind(this);
  }
  handleChange(e) {
    this.setState({
      markdown: e.target.value
    });
  }
  handleEditorMaximize() {
    this.setState({
      editorMaximized: !this.state.editorMaximized
    });
  }
  handlePreviewMaximize() {
    this.setState({
      previewMaximized: !this.state.previewMaximized
    });
  }
  render() {
    const classes = this.state.editorMaximized ? 
          ['editorWrap maximized', 
           'previewWrap hide', 
           'fa fa-compress'] : 
          this.state.previewMaximized ?
          ['editorWrap hide', 
           'previewWrap maximized', 
           'fa fa-compress'] :
          ['editorWrap', 
           'previewWrap', 
           'fa fa-arrows-alt'];
    return (
      <div>
        <div className={classes[0]}>
          <Toolbar 
            icon={classes[2]} 
            onClick={this.handleEditorMaximize}
            text="Editor"/>
          <Editor markdown={this.state.markdown} 
            onChange={this.handleChange} />
        </div>
        <div className="converter">
        </div>
        <div className={classes[1]}>
          <Toolbar
            icon={classes[2]} 
            onClick={this.handlePreviewMaximize}
            text="Previewer"/>
          <Preview  markdown={this.state.markdown}/>
        </div>
      </div>
    )
  }
};

const Toolbar = (props) => {
    return (
      <div className="toolbar">
        <i title="no-stack-dub-sack" className="fa fa-free-code-camp"/>      
        {props.text}
        <i onClick={props.onClick} className={props.icon}></i>
      </div>
   )
}

const Editor = (props) => {
  return (
    <textarea id="editor"
      value={props.markdown}
      onChange={props.onChange}
      type="text"/>
    )
}

const Preview = (props) => {
  return (
      <div id='preview' dangerouslySetInnerHTML={{__html: marked(props.markdown, { renderer: renderer })}} />
    )
}

const placeholder = 
`# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:
  
Heres some code, \`<div></div>\`, between 2 backticks.

\`\`\`
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
    return multiLineCode;
  }
}
\`\`\`
  
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.com), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | ------------- 
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbererd lists too.
1. Use just 1s if you want! 
1. But the list goes on...
- Even if you use dashes or asterisks.
* And last but not least, let's not forget embedded images:

![React Logo w/ Text](https://goo.gl/Umyytc)
`

ReactDOM.render(<App />, document.getElementById('app'));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

I’m not sure if it was a typo on your part, but both the Counters and Counter files are labeled Counter.jsx in your post above. If it wasn’t a typo, and you don’t actually have a `Counters.jsx’ file, that could be a problem.

I’m not sure, but if your Counters is a component, then that file should be capitalized.

It’s hard to tell, but the error:

TypeError: Cannot read property ‘counters’ of null

sounds to me like there is a problem here:

{this.props.counters.map(counter => (

It sounds to me like this.props is evaluating to null so it can’t read the property counters on it. I would console.log out this.props at the beginning of that render method and see what it is.