Responsive Notifications Page Using React, CSS Fflexbox, CSS Grid

Community feedback

• 

  tan•640

  @tan911Posted almost 2 years ago

  It's okay to import 'notificationList' directly to the component's who needs it. Also you can pass 'notificationList' as props. However when passing it as props I think it's read not a notificationList, the code looks like this,

  import Header from './components/header/Header';
  import Notifications from './components/notifications/Notifications';
  import notificationsList from './data/notificationsList';
  
  export default function App() {
    const [read, setRead] = useState(notificationsList);
  
    return (
      <main className="main">
        <section className="notifications">
          <div className="c-notifications">
            <Header setRead={setRead}  notificationsList={read} />
            <Notifications />
          </div>
        </section>
      </main>
    );
  }
  

  You use 'useState' with initial value of 'notificationsList'. You don't need to pass 'notificationList' itself instead use the 'read' variable to pass data into your children component.

  Marked as helpful

  1

  ---

  

  Erel Ropeta•385

  @ereljapcoPosted almost 2 years ago

  Oh, right. Forgot about the initial value. Thank you, @tan911! ☺ By the way, can I ask which is the best practice in this case? Passing the initial value as props or importing it on the component?

  0

  

  tan•640

  @tan911Posted almost 2 years ago

  @ereljapco Welcome, Importing on the component is even better.

  1

  

  Erel Ropeta•385

  @ereljapcoPosted almost 2 years ago

  @tan911 Thank you so much! I will refactor my code using import then ☺

  1