Olá, tudo bem rodei o fórum mas não vi ninguém com este problema... E não consigo identificar aonde está errado, então que poderia ser?
Segue os códigos passado em aula:
ListaDeCategoria.js
import { Component } from "react";
import "./style.css";
class ListaDeCategorias extends Component {
constructor() {
super();
this.state = {category: []}
}
componentDidMount() {
this.props.category.inscrever(this._newCategories.bind(this));
}
_newCategories(category) {
this.setState({...this.state, category})
}
_handleEventInput(e) {
if(e.key == "Enter") {
let valueCategory = e.target.value;
this.props.addCategory(valueCategory);
}
}
render() {
return (
<section className="list-category">
<ul className="list-category_list">
{this.state.category.map((category, index) => {
return <li key={index} className="list-category_item">{category}</li>;
})}
</ul>
<input
type="text"
placeholder="Adicionar Categoria"
onKeyUp={this._handleEventInput.bind(this)}
/>
</section>
)
}
}
export default ListaDeCategorias;
Categorias.js
export default class Categorias {
constructor() {
this.items = [];
this._inscritos = [];
}
inscrever(func) {
this._inscritos.push(func)
}
notificar() {
this._inscritos.forEach(func => {
func(this.category);
});
}
addCategory = (newCategory) => {
this.items.push(newCategory);
this.notificar(this.category);
}
}
App.js
import React, { Component } from "react";
import ListasDeNotas from "./components/ListasDeNotas/index";
import FormularioCadastro from "./components/FormularioCadastro/index";
import ListaDeCategorias from "./components/ListaCategorias";
import "./assets/App.css";
import './assets/index.css';
import Categorias from "./dados/Categorias";
import ArrayNotas from "./dados/Notas";
export default class App extends Component{
constructor() {
super();
this.categorias = new Categorias();
this.notas = new ArrayNotas();
}
render() {
return (
<section className="conteudo">
<FormularioCadastro
category={this.categorias.items}
createdCard={this.notas.createdCard}
/>
<main className="conteudo-principal">
<ListaDeCategorias
addCategory={this.categorias.addCategory.bind(this.categorias)}
category={this.categorias}
/>
<ListasDeNotas notas ={this.notas.notas}
deleteNota = {this.notas.deleteCard}
/>
</main>
</section>
);
}
}