React replace certain key values from array of objects with asterisk in datatable row after fetching-CodePudding

I have a datatable/datagrid that is printing a list of data through an array of objects with different values. How do I target a specific object or in this case column and change its rows value from true/false to asterisk ***** to hide from the user.

Array as shown in console with objects and values

Datatable with example values

const [userList, setUserList]=useState([]);
useEffect(()=> {
createAPIEndpoints(ENDPOINTS.USERLIST).fetchAll().then(res =>{
setUserList(res.data);
})
.catch(err => console.log(err))},[]);

return (
<div style={{ height: 600, width: '85%',marginLeft:"30vh"}}>
  <DataGrid
    rows={userList}
    columns={newuserList}
    pageSize={10}
    rowsPerPageOptions={[10]}
    checkboxSelection
  />
  <div>

This is the code that I'm using to fetch a list of user accounts and storing its values in a material ui Datagrid row. I want to target a specific key and its values for example 'passwordIsChanged' and replace its values from true/false to asterisk ****. Any ideas? As shown in the image.

CodePudding user response：

This should be very easy. Before setting the userList just update it.

Check this line out now data.forEach(user => user.passwordIsChanged = '*****')

There was two equal signs before now its only one. That was my mistake. It should work now.

const [userList, setUserList]=useState([]);
useEffect(()=> {
createAPIEndpoints(ENDPOINTS.USERLIST).fetchAll().then(res =>{
// here update the data
let data = res.data
data.forEach(user => user.passwordIsChanged = '*****') // something like this, check your data structure
console.log(data) // confirm/debug data 
setUserList(data);
})
.catch(err => console.log(err))},[]);

return (
<div style={{ height: 600, width: '85%',marginLeft:"30vh"}}>
  <DataGrid
    rows={userList}
    columns={newuserList}
    pageSize={10}
    rowsPerPageOptions={[10]}
    checkboxSelection
  />
  <div>