1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

//Separate Values
<Person
	firstName="John"
	lastName="Mavrick"
/>

// Bundled in an array using map
function App() {
  const products = productsData.map(item => <Product key={item.id} product={item}/>)
  return (
    <div>
        {products}
    </div>
  )
}

export default App

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

//Separate Values
function Person(firstName) {
	<p>First Name: {firstName}</p>
}

//Bundled in an array using map
function Product(props) {
    return (
    <div>
        <h2>{props.product.name}</h2>
        <p>${props.product.price}</p>
        <p>{props.product.description}</p>
    </div>
    )
}

export default Product;

1

list from ReactJS Props AND !outgoing(ReactJS Props)