LU01b - Using Variables

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

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 element 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>
  )
}