How can I change state of object in a React list onClick?-CodePudding

I have a List of Objects looking like this:

const List = [
  {
    title: " ",
    timestamp: 500,
    seen: false
  },

  {
    title: " ",
    timestamp: 600,
    seen: false
  },

The List ist displayed as a List auf Buttons with a title an an icon. When a Button is clicked, the object should be marked as "seen: true" and the icon should change the color. My problem: In my chase, the icon only changes the color when the component is rerendert, it should change when the button is clicked though. Can someone help?


const styles: Styles = {
  icon_unseen: {
    color: "#f97671",
  },
  icon_seen: {
    color: "#bdbdbd",
  }
};

export const  = () => {


  const sortedList = List.sort((a, b) => a.timestamp - b.timestamp);

  const onClick = (event: any) => {
     List.map((item) =>item.timestamp==event.currentTarget.id? item.seen=!item.seen : "")
      };

return (
 <Box>
      <PopperUnstyled>
        <StyledPopperDiv>
          {sortedNList.map((element) => (
            <ListItemButton id={element.timestamp} 
                            onClick={onClick} 
                            sx={{borderRadius: 2}}>
            <ListItem>
            <ListItemText
                  primary={<Typography>{element.title}</Typography>
            />
            <FiberManualRecordRoundedIcon sx={element.seen ? styles.icon_seen : styles.icon_unseen}/>
            </ListItem>
            </ListItemButton>
            <ListItemText
                  primary={<Typography>{element.title}</Typography>
            />
            <FiberManualRecordRoundedIcon sx={element.seen ? styles.icon_seen : styles.icon_unseen}/>

          ))}
        </StyledPopperDiv>
      </PopperUnstyled>
    </Box>
  );
};

CodePudding user response：

Modify these three places to make it work:

// Assume you have fetched data from server and sorted

// Ideally, this should be inside of your data fetching function, not in the component
const sortedList = List.sort((a, b) => a.timestamp - b.timestamp); 

// 1.
const [sortedNList, setSortedNList] = useState(sortedList);

// 2.
const onClick = (timestamp) => { // We don't need to take the event as param here, but timestamp instead
  setSortedNList(sortedNList.map((item) => item.timestamp === timestamp ? {...item, seen: !item.seen} : item))
};

// 3.
{sortedNList.map((element) => (
  <ListItemButton 
    id={element.timestamp} 
    onClick={() => onClick(element.timestamp)} // pass in element's timestamp
    sx={{borderRadius: 2}}>
  ...
)}

Resource recommendation: React Beta docs

CodePudding user response：

I'm not sure where 'List' is coming from but if it would be defined in the component, you need to link it to the component's state.

const [list, setList] = useState(List);

And when you you want to update it, you do it through setList.

setList((prevState => ({
    ...prevState, 
    Your changes
}))

This also means that inside the JSX, you use list instead of List.