C
I fixed some of the moments, the layout and the style I removed to work on my computer. The whole logic works. I'm adding the working code below. That's what he fixed:(1)B App Class: deleted modal status randomId Must be a function. addItem, deleteItem - Refactory (2)NoteBoard: condition removed, it comes from Props 3)NoteItem - slightly simplified HTML, like no mistakes 4)HorizontalMenu - made it easier for me to 5)NewNoteModal to rewrite in khoks, long time with classes, the use of HTML as an ancient subject. I got the logic to make it work.import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
todos: [
{
id: "fghsf",
completed: false,
title: "Hello World",
text:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took",
},
{
id: "adfgd",
completed: false,
title: "toggle JavaScript",
text:
"The toggle() method of the DOMTokenList interface removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.",
},
{
id: "asdsa",
completed: false,
title: "Fetch API",
text:
"The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.",
},
{
id: "12312sasda",
completed: false,
title: "Single-page application (SPA)",
text:
"A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.",
},
],
};
this.addItem = this.addItem.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
getRandomId = () => f${(~~(Math.random() * 1e8)).toString(16)};
addItem(title, text) {
const newItem = {
id: this.getRandomId(),
completed: false,
title,
text,
};
this.setState(({ todos }) => {
const newArr = [...todos, newItem];
return {
todos: newArr,
};
});
}
deleteItem(id) {
this.setState(({ todos }) => ({
todos: todos.filter((item) => item.id !== id),
}));
}
render() {
const { todos } = this.state;
console.log(this.state.todos);
return (
<div className="App">
<div className="container">
Menu
<div className="notes-block-container">
SearchPanel
<HorizontalMenu addItem={this.addItem} />
<NoteBoard todos={todos} onDelete={this.deleteItem} />
</div>
</div>
</div>
);
}
}
class NoteBoard extends Component {
render() {
const { todos } = this.props;
const { onDelete } = this.props;
return (
<div className="noteBoard-container">
{todos.map((todo) => (
<NoteItem
todo={todo}
key={todo.id}
onDelete={() => onDelete(todo.id)}
id={todo.id}
/>
))}
</div>
);
}
}
class NoteItem extends Component {
render() {
const { todo, onDelete } = this.props;
return (
<div className="note-item">
<div className="note-title">{todo.title}</div>
<p className="note-text">{todo.text}</p>
<button onClick={onDelete}>delete me</button>
</div>
);
}
}
class HorizontalMenu extends Component {
constructor(props) {
super(props);
this.state = {
isModalOpened: false,
};
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({
isModalOpened: true,
});
}
closeModal() {
this.setState({
isModalOpened: false,
});
}
render() {
return (
<div className="horison-menu">
HorizontalMenu
<button className="new-note" onClick={() => this.openModal()}>
new note
</button>
{this.state.isModalOpened && (
<NewNoteModal
isOpened={this.state.isModalOpened}
closeModal={this.closeModal}
addItem={this.props.addItem}
/>
)}
</div>
);
}
}
const NewNoteModal = (props) => {
const [title, setTitle] = React.useState("");
const [text, setText] = React.useState("");
return (
<div className="new-note-modal">
<div className="modal-title">
<p>New note</p>
<button className="delete-btn" onClick={() => this.props.closeModal()}>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="8" cy="8" r="8" fill="#FF4D4D" />
<path
d="M5.17163 5.17163L10.8285 10.8285"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.8285 5.17163L5.17164 10.8285"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
<div>
<input
type="text"
placeholder="title"
value={title}
onChange={({ target }) => setTitle(target.value)}
/>
<textarea
type="text"
placeholder="note text"
value={text}
rows="10"
cols="12"
onChange={({ target }) => setText(target.value)}
/>
<button
className="btn-add"
type="submit"
onClick={() => {
props.addItem(title, text);
props.closeModal();
}}
>
add
</button>
</div>
</div>
);
};