gosiaantoniak / goit-react-hw-02-feedback

Hi there 👋

🙍 About me

• 🔭 I’m currently working on developing an application DrawYourDreams from my portfolio.
• 🌱 I’m currently learning JS and React.
• 👯 I’m looking to collaborate on cooperation for a joint project with React.
• 💬 Ask me about whatever you want.
• 📫 How to reach me: write me on email or linkedin
• ⚡ Fun fact:
• I love people and I like working in a group,
• When I was 25, I enrolled in a ballroom dancing course,
• I love cooking and animals.

🔧 Technologies

📫 Contact Me on Social Media

💻 Open Source Work Stats

goit-react-hw-02-feedback's Issues

Project structure

goit-react-hw-02-feedback/src/App.js

Lines 1 to 58 in 084ab33

	import React, { Component } from "react";
	import Statistics from "./components/Statistics/Statistics";
	import FeedbackOptions from "./components/FeedbackOptions/FeedbackOptions";
	import Section from "./components/Section/Section";
	import Notification from "./components/Notification/Notification";
	import "./index.css";
	class App extends Component {
	state = {
	good: 0,
	neutral: 0,
	bad: 0,
	};
	handleFeedback = (e) => {
	const { name } = e.target;
	this.setState((state) => ({ [name]: state[name] + 1 }));
	};
	countTotalFeedback = () => {
	const { good, neutral, bad } = this.state;
	return good + neutral + bad;
	};
	countPositiveFeedbackPercentage = () => {
	const { good, neutral, bad } = this.state;
	return Math.round((good / (good + neutral + bad)) * 100);
	};
	render() {
	const { good, neutral, bad } = this.state;
	const actualState = this.state;
	const total = this.countTotalFeedback();
	const positivePercentage = this.countPositiveFeedbackPercentage();
	return (
	<>
	<Section title="Please leave feedback">
	<FeedbackOptions options={actualState} onLeaveFeedback={this.handleFeedback} />
	</Section>
	<Section title="Statistics">
	{total ? (
	<Statistics
	good={good}
	neutral={neutral}
	bad={bad}
	total={total}
	positivePercentage={positivePercentage}
	/>
	) : (
	<Notification message="There is no feedback" />
	)}
	</Section>
	</>
	);
	}
	}
	export default App;

App może lepiej trzymać w components. Swoją drogą w components masz już App którego nie używasz, można je podmienić albo usunąć to którego nie używasz.