initialize-state.js

import React, { useState, useCallback } from "react";

const readStyle = { backgroundColor: "grey" };
const unreadStyle = { backgroundColor: "white" };

const EmailsListItem = ({ hasRead }) => {
  const [read, setRead] = useState(hasRead || false);
  const resetRead = useCallback(() => setRead(hasRead), [hasRead]);

  const style = read ? readStyle : unreadStyle;

  return (
    <div style={style}>
      <div>Subject: Email one, Content: Hello</div>
      <button
        onClick={() => {
          /* Renders email content */
        }}
      >
        Open
      </button>
      <button onClick={() => resetRead()}>Reset read</button>
    </div>
  );
};

export default EmailsListItem;