React Exercise: Build a dynamic list application

Question

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.

Answer 1

Disclaimer: I know sqat about react.js. I only have some minor nitpicks.

---

When the body of an anonymous function is a single line, instead of ... => { return value; }, you can write more compactly as ... => value, for example here:

let updatedHobbies = this.state.hobbies.filter((hobby) => currentHobby !== hobby);

---

Although this works, I think it's an unusual writing style, and it would be better to spell it out as an if statement:

!this.state.deleted && this.setState({
 deleted: true
});

---

When I saw this code, it made me curious what happens for other values of hobbiesLength, that is, what would be in an else block:

if (hobbiesLength < 3) {
 cssCounter = 'less-three';
} else if (hobbiesLength === 3) {
 cssCounter = 'equal-three';
}

The answer to that is a couple of lines higher up:

let cssCounter = 'more-three';

If you move this to the else block, then all the possible values of cssCounter will become easily visible in one place, which will be easier to read and understand.