Manage your learning questions and answers
Because when setting string conditionally in JSX, we must use Template Literal because using Ternary operator enters JavaScript mode, which then results in an error.
{/* must have curly braces around the template literal */}
<li className={`${pizzaObject.soldOut ? "pizza sold-out" : "pizza"}`}>It's a useful syntax for when we have more than one element to return in JSX, we use it instead of a div. We can also add a key by adding <React.Fragment key="..." >
{/* Fragments */}
<>
...
</>
{/* Fragments with a key */}
<React.Fragment key="..." >
...
</React.Fragment>Yes, by using if statement outside of the JSX (inside the component).
Because JSX requires a new array to be dynamically rendered, and forEach does not create a new array.
We would map over the array, and pass the object as a prop, and in child component we use that prop to access the content of the object.
{/* mapping and passing object as a prop */}
<div>
{pizzaData.map((pizza) => (
<Pizza pizzaObject={pizza} />
))}
</div>
{/* using the object from props to extract data */}
function Pizza({ pizzaObject }) {
return (
<div className="pizza">
<img src={pizzaObject.photoName} alt={pizzaObject.name} />
<div>
<h3>{pizzaObject.name}</h3>
<p>{pizzaObject.ingredients}</p>
<span>${pizzaObject.price}</span>
</div>
</div>
);
}No answer yet
No answer yet
No answer yet
No answer yet
State is Data that a component can hold over time, specific to the component, state is necessary for information that needs to be remembered throughout the app's lifecycle.
No answer yet
Props is an object, which when we change its data it affects the parent component as well, and data can be only passed from parent to child component (one-way data flow).