I am new to React and I am doing some tutorials online. Now I have task like this: If the Component in the following code is a Stateless Functional Component, what expression would you write to access the items prop inside the Component?
<IngredientList items={ingredient.items} />
I have no idea what is correct answer and why :/ Would you be so kind to help me ?
If it's stateless props.items. If its a class this.props.items
Stateless functional components typically look something like this.
Passing just a single prop to a child would like this.
const ChildComponent = ({ someProp }) => (
<div>
<h1>Child Component {someProp}</h1>
</div>
)
Passing all of the parents props to a child would like like this.
const ChildComponent = (props) => (
<div>
<h1>Child Component {props.someProp}</h1>
</div>
)
You can access all your props by using props.itemName. Ex: By simply typing props.items
Your functional component will look something like below,
const IngredientList = props => {
// here you get all the props passed to IngredientList
const items = props.items.map(item => <div>item</div>);
return <div>items</div>
}
