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
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:
`
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: