Video 56-1 Another Recap of React Router Setup

Video 56-2 Display TShirts and style t-shirt components

Video 56-3 Recap Remove from cart and not allow duplicate

Video 56-4 Explore Conditional Rendering and conditional css class

Video 56-5 Prop Drilling to pass data to a many level components

Video 56-6 Simple Introduction to Context API to avoid Prop drilling

Video 56-7 Deploy react router reload issue and introduction to react dev tool

Video 56-8 Module Summary and interview questions

QUIZ

Q1: Fill in the blank. element: , path: "heroes/:heroId", loader: async ({ params }) => { return fetch( `/fake/api/heroes/${___?____}`, ); }
Ans: params.heroId

Q2: What will be the output? const data = [ { name: "hero", id: 1221 }, { name: "Karim", id: 1222 }, { name: "Rahim", id: 1223 } ]; const result = data.find(person => person.id === "1221"); console.log(result);
Ans: undefined.

Q3: Which one is not true?
Ans: Conditional rendering means rendering all components at the same time.

Q4: user ____?____ < User /> If I want to render < User /> when the user is true what should I write?
Ans: &&.

Q5: What do you think which one will be rendered to the UI? const admin = false; { admin ? <h1>Admin<h1>: <User /> }
Ans: <User/>

Q6: How do you declare the context API?
Ans: const MyContext = createContext(defaultValue);

Q7: Fill in the blank with the appropriate word.
Ans: .Provider

Q8: In which way do we pass props to two sibling components?
Ans: Using state up to the Parent Component and Using Context API

Q9: Which hook do you want to use for access context?
Ans: useContext()

Q10: Which of the following content should be inside _redirects file to solve page not found issue for react apps in netlify?
Ans: /* /index.html 200

THE END