Week 2

This session is about the concepts of State as used in React components, as well as Conditional Rendering.

Contents

• Preparation

• Session Plan (for mentors)

• Assignment

Session Learning Goals

By the end of this session, you will:

Props

• Understand what props are when to use them

• Be able to pass props to components

• Know the concept of props as your component's API to make them re-usable

• Read props using object- and destructuring syntax

• Be able to forward props to child components

• Be familiar with child components

• Deal with rendering child components passed to your components

State

• Have a solid understanding of what the difference between Props and State is

• Understand what State is and know examples of cases when to use it

• Be familiar to the fact that React uses Hooks

• Be able to update different kinds of State

• Have a basic understanding of what causes component re-renders

• Be able to share State and state update functions with child and parent components

Conditional Rendering

• Understand conditional rendering based on Props

• Conditionally render content based on State