Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created November 14, 2020 19:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/10c01561a14d79e660ffab892cc8f254 to your computer and use it in GitHub Desktop.
Save codecademydev/10c01561a14d79e660ffab892cc8f254 to your computer and use it in GitHub Desktop.
Codecademy export
// import React, { Component } from "react";
// import NewTask from "../Presentational/NewTask";
// import TasksList from "../Presentational/TasksList";
// export default class AppClass extends Component {
// constructor(props) {
// super(props);
// this.state = {
// newTask: {},
// allTasks: []
// };
// this.handleChange = this.handleChange.bind(this);
// this.handleSubmit = this.handleSubmit.bind(this);
// this.handleDelete = this.handleDelete.bind(this);
// }
// handleChange({ target }){
// const { name, value } = target;
// this.setState((prevState) => ({
// ...prevState,
// newTask: {
// ...prevState.newTask,
// [name]: value,
// id: Date.now()
// }
// }));
// }
// handleSubmit(event){
// event.preventDefault();
// if (!this.state.newTask.title) return;
// this.setState((prevState) => ({
// allTasks: [prevState.newTask, ...prevState.allTasks],
// newTask: {}
// }));
// }
// handleDelete(taskIdToRemove){
// this.setState((prevState) => ({
// ...prevState,
// allTasks: prevState.allTasks.filter((task) => task.id !== taskIdToRemove)
// }));
// }
// render() {
// return (
// <main>
// <h1>Bruh</h1>
// <NewTask
// newTask={this.state.newTask}
// handleChange={this.handleChange}
// handleSubmit={this.handleSubmit}
// />
// <TasksList
// allTasks={this.state.allTasks}
// handleDelete={this.handleDelete}
// />
// </main>
// );
// }
// }
import React, { useState } from "react";
import NewTask from "../Presentational/NewTask";
import TasksList from "../Presentational/TasksList";
export default function AppFunction() {
// hook your code up here ;)
const [newTask, setNewTask] = useState({});
const [allTasks, setAllTasks] = useState([]);
const handleChange = ({ target }) => {
const { name, value } = target;
setNewTask(prevNewTask => ({
...prevNewTask,
[name]: value,
id: Date.now()
}));
}
const handleSubmit = (event) => {
event.preventDefault();
if (!newTask.title) return;
setAllTasks(prevAllTasks => [newTask, ...prevAllTasks]);
}
const handleDelete = (taskIdToRemove) => {
setAllTasks(prevAllTasks => ({
prevAllTasks.filter(task => task.id !== taskIdToRemove);
}));
}
return (
<main>
<h1>NOT Tasks</h1>
<NewTask
newTask={newTask}
handleChange={handleChange}
handleSubmit={handleSubmit}
/>
<TasksList
allTasks={allTasks}
handleDelete={handleDelete}
/>
</main>
);
}
import React from "react";
import ReactDOM from "react-dom";
// import App from "./Container/AppClass";
import App from "./Container/AppFunction";
ReactDOM.render(
<App />,
document.getElementById("app")
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment