Notes.txt

Class Component and State | Part 2 | Cheat Sheet
Concepts in Focus
•	
setState()
 Object Syntax
•	Sending Function as Callback
•	Input Element
•	Searchable Users List Application
1. setState() Object Syntax
The 
setState()
object syntax can be used while updating the state to the value that is independent of the previous state.
Syntax:
JS CODE:

this.setState(
  {propertyName1: propertyValue1},
  {propertyName2: propertyValue2}
  // and many more...
);


1.1 Callback vs Object
Callback:
JS CODE:

this.setState(prevState => {
  return { count: prevState.count + 1 };
});

It is used while updating the state to a value, which is computed based on the previous state.
Object:
JS CODE:

this.setState({ quantity: 2 });

It is used while updating the state to a static value.
2. Sending Function as Callback
We can pass functions as props to child components.
Syntax:
JSX CODE:

<ComponentName functionName={this.functionName} />

3. Input Element
In React, the Input Element value can be handled in two ways:
•	Controlled Input
•	Uncontrolled Input
3.1 Controlled Input
If the Input Element value is handled by a React State then it is called Controlled Input. Controlled Inputs are the React Suggested way to handle Input Element value.
Example:
JSX CODE:

import {Component} from 'react'

class App extends Component {
  state = {
    searchInput: '',
  }

  onChangeSearchInput = event => {
    this.setState({
      searchInput: event.target.value,
    })
  }

  render() {
    const {searchInput} = this.state
    return (
      <input
        type="text"
        onChange={this.onChangeSearchInput}
        value={searchInput}
      />
    )
  }
}

export default App



3.2 Uncontrolled Input
If the Input Element value is handled by the browser itself then it is called Uncontrolled Input.
Uncontrolled inputs are like traditional HTML form inputs. Its valuecan only be set by a user, but not programmatically. However, in controlled input value is programmatically handled using React State.
Example:
JSX CODE:

<input type="text" />

4. Searchable Users List Application
File: src/App.js
JSX CODE:

import {Component} from 'react'
import UserProfile from './components/UserProfile'

import './App.css'

const initialUserDetailsList = [
  {
    uniqueNo: 1,
    imageUrl: 'https://assets.ccbp.in/frontend/react-js/esther-howard-img.png',
    name: 'Esther Howard',
    role: 'Software Developer'
  },
  {
    uniqueNo: 2,
    imageUrl: 'https://assets.ccbp.in/frontend/react-js/floyd-miles-img.png',
    name: 'Floyd Miles',
    role: 'Software Developer'
  },
  {
    uniqueNo: 3,
    imageUrl: 'https://assets.ccbp.in/frontend/react-js/jacob-jones-img.png',
    name: 'Jacob Jones',
    role: 'Software Developer'
  },
  {
    uniqueNo: 4,
    imageUrl: 'https://assets.ccbp.in/frontend/react-js/devon-lane-img.png',
    name: 'Devon Lane',
    role: 'Software Developer'
  }
]

class App extends Component {
  state = {
    searchInput: '',
    usersDetailsList: initialUserDetailsList
  }

  onChangeSearchInput = event => {
    this.setState({
      searchInput: event.target.value
    })
  }

  deleteUser = uniqueNo => {
    const {usersDetailsList} = this.state
    const filteredUsersData = usersDetailsList.filter(
      each => each.uniqueNo !== uniqueNo
    )
    this.setState({
      usersDetailsList: filteredUsersData
    })
  }

  render() {
    const {searchInput, usersDetailsList} = this.state
    const searchResults = usersDetailsList.filter(eachUser =>
      eachUser.name.includes(searchInput)
    )
    return (
      <div className="app-container">
        <h1 className="title">Users List</h1>
        <input
          type="search"
          onChange={this.onChangeSearchInput}
          value={searchInput}
        />
        <ul className="list-container">
          {searchResults.map(eachUser => (
            <UserProfile
              userDetails={eachUser}
              key={eachUser.uniqueNo}
              deleteUser={this.deleteUser}
            />
          ))}
        </ul>
      </div>
    )
  }
}

export default App



File: src/components/UserProfile/index.js

JSX CODE:

import './index.css'

const UserProfile = props => {
  const {userDetails, deleteUser} = props
  const {imageUrl, name, role, uniqueNo} = userDetails
  const onDelete = () => {
    deleteUser(uniqueNo)
  }
  return (
    <li className="user-card-container">
      <img src={imageUrl} className="profile-pic" alt="profile-pic" />
      <div className="user-details-container">
        <h1 className="user-name"> {name} </h1>
        <p className="user-designation"> {role} </p>
      </div>
      <button className="delete-button" onClick={onDelete}>
        <img
          src="https://assets.ccbp.in/frontend/react-js/cross-img.png"
          alt="cross"
          className="delete-img"
        />
      </button>
    </li>
  )
}

export default UserProfile