JavaScript React by Example Building the Application Creating the Counter

Rohit Thorat
Rohit Thorat
11,539 Points

not getting value in total

i am not getting the total in my app

Ari Misha
Ari Misha
18,354 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
11,539 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
11,539 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
18,354 Points

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

Rohit Thorat
Rohit Thorat
11,539 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.