Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,268 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,268 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.

3 Answers

Darryl Driedger
seal-mask
.a{fill-rule:evenodd;}techdegree
Darryl Driedger
Full Stack JavaScript Techdegree Student 24,724 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.

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!

Chia Yin Liu
Chia Yin Liu
5,944 Points

I was having the same problem. And there was no error in console, either. And I changed the prop name in app.js which is totalInvited={totalInvited} to numberTotalInvited={totalInvited} , and it works. I am guessing that because of Teacher Guil had set the prop name to numberTotalInvited in Counter.js so that would be make sense if there is same prop name in app.js.