Displaying Contacts Count - KatyaHorton/Udacity-React-practice GitHub Wiki

React:

  • State
  • UI based on State
  1. Create UI based on the state
//show count for contacts
{showContacts.length !== this.props.contacts.length && (
  <div className='showing-contacts'>
   <span>
     Now showing {showContacts.length} of {this.props.contacts.length} total
   </span>
   <button onClick={this.clearQuery}>
	Show all
   </button>
 </div> 
)}
  1. Create function to clear out query
//set query to an empty string to show all the contacts again
clearQuery = (query) => {
	this.setState({ query: ''})
}
⚠️ **GitHub.com Fallback** ⚠️