Task Description:
-
Create a div-element and take control over it using a Vue-Instance.
-
Print an array of hobbies into the div-element. Provide some default hobbies.
-
Add a ‘New Hobby’ button and a text-input element. So that the user
can add additional hobbies. -
When a hobby list-item is clicked, it shall be removed from the list.
-
Add a “Hobby deleted”-paragraph which is only shown when a hobby-item has been deleted at least one time.
-
Above the list of hobbies add a hobby-counter which shows the current count of hobby-items.
-
Style the hobby-list depending on whether you have more or less then 3 hobbies in the list.
-
Outsource your hobbies (the list-item elements) into a component (so that it becomes re-usable).
The source-code of my solution:
// ----- index.js ---------- import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); // --------- App.js ---------- import React, { Component } from 'react'; import { Hobbies } from './Hobbies'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <Hobbies /> </div> ); } } export default App; // ------------ Hobbies.js -------------- import React, { Component } from 'react'; import { HobbyItem } from './HobbyItem'; class Hobbies extends React.Component { constructor(props) { super(props); this.state = { hobbies: [ 'Reading', 'Sport', 'Music', 'Chess', 'Cooking' ], deleted: false } } addHobby(event) { let currentHobbies = this.state.hobbies; let textBox = event.target.previousElementSibling; if (textBox.value) { currentHobbies.push(textBox.value); textBox.value = ''; this.setState({ hobbies: currentHobbies }); } } removeHobby(event) { let currentHobby = event.target.textContent; let updatedHobbies = this.state.hobbies.filter((hobby) => { return currentHobby !== hobby; }); this.setState({ hobbies: updatedHobbies }); !this.state.deleted && this.setState({ deleted: true }); } render() { let cssHobbyItem = 'hobby-item'; let cssCounter = 'more-three'; let hobbyItems = this.state.hobbies.map((hobby, i) => { return <li onClick={this.removeHobby.bind(this)} className={cssHobbyItem} key={cssHobbyItem + i}>{hobby}</li>; }); let hobbiesLength = this.state.hobbies.length; if (hobbiesLength < 3) { cssCounter = 'less-three'; } else if (hobbiesLength === 3) { cssCounter = 'equal-three'; } return ( <div className="hobbies-list"> <nav className="nav-add"> <input type="text" id="input-add" /> <button id="new-hobby" onClick={this.addHobby.bind(this)}>New Hobby</button> </nav> <p>{this.state.deleted && 'Hobby Deleted!'}</p> <p className={cssCounter} ><b>Count of Hobbies: </b> {this.state.hobbies.length}</p> <ul> {hobbyItems} </ul> </div> ); } } export { Hobbies }; // --------- HobbyItem.js --------------- import React, { Component } from 'react'; class HobbyItem extends React.Component { render() { return ( <li></li> ); } } export { HobbyItem }
Working Live-Demo
Is it all done in a good way and manner?
What would you do differently and why?
Looking forward to reading your comments and answers.