CODEWITHSUNDEEP
reactjs
handsome
handsome

Reputation: 2422

Keep everything in sync

I have a list of users coming from the database

const [users, setUsers] = useState([]);
database.getUsers.then(users => setUsers(users))

I print that in a simple list and when I click on each of them I render a form to update the name

const [user, setUser] = useState({});
database.getUser(userId).then(user => setUser(user))

useEffect(() => {

    // I need to implement debounce or something like that here. any suggestions are welcome;)
    database.saveUser(userId, user).then(user => console.log(user.name + 'saved!'))

}, [user])

<input value={ user.name } onChange={(e) => setUser({...user, name: e.target.value})} />

My question is: how to keep users updated with the name I just updated in one particular user?

Upvotes: 0

Views: 49

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

let say you have some unique id user_id in your user list each individual user object.

database.saveUser(userId, user).then(user => {

    const updatedUsers = users.map(function(userInfo){
        if(userInfo.user_id === user.user_id){
            userInfo.name = user.name;
        }
        return userInfo;;
    })
    // update the userlist with current updated user
    setUsers(updatedUsers)
    console.log(user.name + 'saved!')
})

Upvotes: 0

shahabvshahabi
shahabvshahabi

Reputation: 955

for your problem it is better to code like this : 

const [user, setUser] = useState({});


useEffect(() => {
   fetchUserInfo()
}, [])

const fetchUserInfo = () => {
  database.getUser(userId).then(user => setUser(user))
}

const changeHandler = e => {

    setUser({...user, name: e.target.value});
    database.saveUser(userId, user).then(user => console.log(user.name + 'saved!'))

}

<input value={ user.name } onChange={changeHandler}/>

in this way while you typing your username your db will be sync with your form.

Upvotes: 1

Related Questions