Scribd
Upload
23 views

Set State

SET STATE in react

Uploaded by

Marada Prudhvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views

Set State

SET STATE in react

Uploaded by

Marada Prudhvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

SET STATE :

~~~~~~~~~

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.

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

2. Sending Function as Callback

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

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 value can only be
set by a user, but not programmatically. However, in controlled input value is
programmatically handled using React State.

<input type="text" />


-----------------------------------------------------------------------------------
----------------------
Searchable Users List Application :
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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


###################################################################################
##############################

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

###################################################################################
##############################

You might also like