JavaScript React by Example Building the Application Creating the Counter

Rohit Thorat
Rohit Thorat
12,191 Points

not getting value in total

i am not getting the total in my app

Ari Misha
Ari Misha
19,139 Points

Hiya there! Can you provide your code base for us to analyze and spot the errors and typos in your code? We ain't Psychics!

Rohit Thorat
Rohit Thorat
12,191 Points

This is my App.js

import React, { Component } from 'react';
import Guestlist from './GuestList';
import Counter from './Counter';



class App extends Component {

  state = {
    isFiltered: false,
    pendingGuest: "",
    guest: [
      {
        name: 'Treasure',
        isConfirmed: false,
        isEditing: false
      },
      {
        name: 'Nic',
        isConfirmed: false,
        isEditing: false
      },
      {
        name: 'Rohit',
        isConfirmed: false,
        isEditing: false
      }
    ]
  };

  toggleGuestPropertyAt(property,indexToChange) {
    this.setState({
      guest: this.state.guest.map((guestname,i) => {
        if(i === indexToChange){
          return{
            ...guestname,
            [property]: !guestname[property]
          };
        }
        else{
          return guestname;
        }
      })
    });
  }

  toggleConfirmationAt(i){
    this.toggleGuestPropertyAt("isConfirmed",i);
  }

  removeGuest(i){
    this.setState({
      guest: [
         ...this.state.guest.slice(0,i),
         ...this.state.guest.slice(i + 1)
      ]
    });
  }

  toggleEditingAt(i){
    this.toggleGuestPropertyAt("isEditing",i);
  }

  setNameAtApp(name,indexToChange) {
    this.setState({
      guest: this.state.guest.map((guestname,i) => {
        if(i === indexToChange){
          return{
            ...guestname,
            name:name
          };
        }
        else{
          return guestname;
        }
      })
    });
  }

  toggleFilter() {
    this.setState({ isFiltered: !this.state.isFiltered })
  }

  handleNameInput(e) {
     this.setState({pendingGuest : e.target.value})
  }

  newGuestSubmit(e){
    e.preventDefault();
    this.setState({
      guest: [
        {
          name:this.state.pendingGuest,
          isConfirmed: false,
          isEditing: false
        },
        ...this.state.guest
      ],
      pendingGuest: ""
    });
  }

   getTotalInvited() {
     this.state.guest.length;
   }
    getAttendingGuests(){
      this.state.guest.reduce(
        (total,guest) => guest.isConfirmed ? total+1 : total,
        0
      );
    }
   // getConfirmedGuests = () =>
    render() {
      const totalInvited = this.getTotalInvited();
      const numberAttending = this.getAttendingGuests();
      const numberUnconfirmed = totalInvited-numberAttending;
     return (
      <div className="App">
            <header>
              <h1>RSVP</h1>
              <p>A Treehouse App</p>
              <form onSubmit={this.newGuestSubmit.bind(this)}>
                  <input type="text"
                         onChange={this.handleNameInput.bind(this)}
                         value={this.state.pendingGuest}
                         placeholder="Invite Someone" />
                  <button type="submit" name="submit" value="submit">Submit</button>
              </form>
            </header>
        <div className="main">
            <div>
              <h2>Invitees</h2>
              <label>
                <input
                  type="checkbox"
                  onChange={this.toggleFilter.bind(this)}
                  checked={this.state.isFiltered}/> Hide those who haven't responded
              </label>
            </div>

               <Counter
                 totalInvited={totalInvited}
                 numberAttending={numberAttending}
                 numberUnconfirmed={numberUnconfirmed} />

               <Guestlist
                 guests={this.state.guest}
                 toggleConfirm={this.toggleConfirmationAt.bind(this)}
                 toggleEditing={this.toggleEditingAt.bind(this)}
                 setNameAt={this.setNameAtApp.bind(this)}
                 isFilteredList={this.state.isFiltered}
                 removeGuestList={this.removeGuest.bind(this)} />

        </div>
      </div>
    );
  }
}

export default App;
Rohit Thorat
Rohit Thorat
12,191 Points

This is my Counter.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Counter extends Component {
  render(){

    return(
      <table className="counter">
        <tbody>
          <tr>
            <td>Attending:</td>
            <td>{this.props.numberAttending}</td>
          </tr>
          <tr>
            <td>Unconfirmed:</td>
            <td>{this.props.numberUnconfirmed}</td>
          </tr>
          <tr>
            <td>Total:</td>
            <td>{this.props.totalInvited}</td>
          </tr>
        </tbody>
      </table>
    );
    }
  }

  Counter.propTypes = {
    numberAttending: PropTypes.number,
    numberUnconfirmed: PropTypes.number,
    totalInvited: PropTypes.number
  };

export default Counter;
Ari Misha
Ari Misha
19,139 Points

Alright! Show us the errors that console threw while running the dev-server.

Rohit Thorat
Rohit Thorat
12,191 Points

There are no errors , the page is displayed in the browser only the value of "Total" in Counter.js is not displayed , i guess there's some problem while passing data in Counter.js from App.js but i can't find the problem.

2 Answers

Darryl Driedger
Darryl Driedger
Full Stack JavaScript Techdegree Student 23,900 Points

.. in your table data you have .. "<td>{this.props.totalInvited}</td>" I believe you should remove the "this." in front of the rest ... I had a similar problem, although it was just a misspelling after props.

Jesse Ma
Jesse Ma
3,709 Points

Omg! I just came across the same problem just now!! The problem for me was the fact that I added an extra curly braces, {}, while Guil did not.

I was missing the 'RETURN' keyword!

getTotalinvited = () => { return ....... }

https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces I linked where I found the problem and hope this helps!