Custom HTML inside functional component - reactjs

Question

I have simple functional component in react
import React from 'react';
import styled from 'styled-components';
import IconButton from '#material-ui/core/IconButton';
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '#material-ui/icons/RemoveShoppingCart';
const Wrapper = styled.section`
padding: 1em;
margin: 0 auto;
width: 400px;
`;
const IngredientRow = styled.div`
display: flex;
margin: 5px 0;
width: 40%;
margin: 0 auto;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
`
const IngredientSelector = (props) => {
const Ingredient = (ingredient) => {
return (
<IngredientRow key={ingredient.id}>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{
props.ingredients.map(ingredient => {
<Ingredient ingredient={ingredient} />
})
}
</Wrapper>
)
}
export default IngredientSelector;
Its not working and giving error in console. Not sure why not working. Please help.

Answer 1

try moving the ingredient function outside of the ingredientSelector and add object destructuring to the props of the ingredient
const Ingredient = ({ingredient}) => {
return (
<IngredientRow key={ingredient.id}>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
const IngredientSelector = (props) => {
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{props.ingredients.map(ingredient => {
<Ingredient ingredient={ingredient} />
})
}
</Wrapper>
)
}

Answer 2

In the object "Ingredient" you should access the ingredientId using "props.ingredient.id" in your case "ingredient.indgredient.id". Because in the functional component "Ingredient". The variable passed is ingredient. Also, key should be passed in map function not in the return. So, your existing code would look like.
import React from 'react';
import styled from 'styled-components';
import IconButton from '#material-ui/core/IconButton';
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '#material-ui/icons/RemoveShoppingCart';
const Wrapper = styled.section`
padding: 1em;
margin: 0 auto;
width: 400px;
`;
const IngredientRow = styled.div`
display: flex;
margin: 5px 0;
width: 40%;
margin: 0 auto;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
`
const IngredientSelector = (props) => {
const Ingredient = (ingredient) => { {/* change it props. But, its your preference*/}
return (
<IngredientRow key={ingredient.ingredient.id}> {/* Because the function component receives variable name ingredient`enter code here` */}
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{
props.ingredients.map(ingredient => {
<Ingredient ingredient={ingredient} key={ingredient.id}/> {/* Code change here */}
})
}
</Wrapper>
)
}
export default IngredientSelector;

Answer 3

Looks like you forgot to return the dom inside the map.
And you are passing ingredient to the Ingredient component as a prop not as an argument. Functional component receives props as an argument.
import React from 'react';
import styled from 'styled-components';
import IconButton from '#material-ui/core/IconButton';
import AddShoppingCartIcon from '#material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '#material-ui/icons/RemoveShoppingCart';
const Wrapper = styled.section`
padding: 1em;
margin: 0 auto;
width: 400px;
`;
const IngredientRow = styled.div`
display: flex;
margin: 5px 0;
width: 40%;
margin: 0 auto;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
`
const IngredientSelector = (props) => {
const Ingredient = ({ingredient}) => { // recieves props
return (
<IngredientRow key={ingredient.id}>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<RemoveShoppingCartIcon />
</IconButton>
</span>
<h4>a</h4>
<span>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</span>
</IngredientRow>
)
}
return (
<Wrapper>
<h2>Select the Burger Ingredients</h2>
{
props.ingredients.map(ingredient => {
return <Ingredient ingredient={ingredient} /> // return the dom
})
}
</Wrapper>
)
}
export default IngredientSelector;