The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Charles Casadei (2) [Avatar] Offline
#1
Hi,

In listing 2.12, a few CSS classes should be changed to match the CSS given as sample code.


  • - task-list => tasks
    - task-list-header => tasks-header
    - task-list-form => new-task-form


  • Book:
    ...
    render() {
    		return (
    			<div className="task-list">
    				<div className="task-list-header">
    					<button className="button button-default" onClick={this.toggleForm}>
    						+ New Task
    					</button>
    				</div>
    				{this.state.showNewCardForm && (
    					<form className="task-list-form" onSubmit={this.onCreateTask}>
    						<input
    							className="full-width-input"
    							onChange={this.onTitleChange}
    							value={this.state.title}
    							type="text"
    							placeholder="title"
    						/>
    						<input
    							className="full-width-input"
    							onChange={this.onDescriptionChange}
    							value={this.state.description}
    							type="text"
    							placeholder="description"
    						/>
    						<button className="button" type="submit">
    							Save
    						</button>
    					</form>
    				)}
    				<div className="task-lists">{this.renderTaskLists()}</div>
    			</div>
    		);
    	}
    ...


    Sample Code:
    ...
    render() {
        return (
          <div className="tasks">
            <div className="tasks-header">
              <button className="button button-default" onClick={this.toggleForm}>
                + New task
              </button>
            </div>
    
            {this.state.showNewCardForm &&
              <form className="new-task-form" onSubmit={this.onCreateTask}>
                <input
                  className="full-width-input"
                  onChange={this.onTitleChange}
                  value={this.state.title}
                  type="text"
                  placeholder="title"
                />
                <input
                  className="full-width-input"
                  onChange={this.onDescriptionChange}
                  value={this.state.description}
                  type="text"
                  placeholder="description"
                />
                <button className="button" type="submit">
                  Save
                </button>
              </form>}
    
            <div className="task-lists">
              {this.renderTaskLists()}
            </div>
          </div>
        );
      }
    ...