LU01b - Using Variables

We can use variables to populate our component dynamically. In JSX we need to use the curly brackets {} to display the value. If we add the parameter „props“ to our function, we can use it in our function to display the value given to this component.

Product.js

Product.js

export default function Product(props) {
  return (
    <div>
      <img 
        src={props.image} 
        alt="Product Image"
        width={300}
        height{300}
      />
      <h2>{props.title)</h2>
      <p>{props.description}</p>
      <p>{props.price)</p>
    </div>
  );
}

ProductsList.js

import Product from './Product.js';
 
export default function ProductsList() {
  return (
    <div>
      <h1>Our Products</h1>
      <Product 
        title="Product 1"
        image="https://placehold.it/800"
        description="This is my Product 1"
        price="$20"
      />
      <Product 
        title="Product 2"
        image="https://placehold.it/800"
        description="This is my Product 2"
        price="$20"
      />
      <Product 
        title="Product 3"
        image="https://placehold.it/800"
        description="This is my Product 3"
        price="$20"
      />
      <Product 
        title="Product 4"
        image="https://placehold.it/800"
        description="This is my Product 4"
        price="$20"
      />
    </div>
  );
}

We can nest components and also use other elements in our component brackets.

Content.js

export default function Content(props) {
  return (
    <section className="content">
      {props.children}
    </section>
  )
}

App.js

import Content from "./Content.js"
import ProductsList from "./ProductsList.js"
 
export default function App() {
  return (
    <div className="app">
      <Content>
        This is my content.
        <ProductsList />
      </Content>
    </div>
  )
}