LU01b - Using Variables [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify mr-1" data-icon="mdi:arrow-left" style="vertical-align: -0.125em; transform: rotate(360deg);"><path d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11h12z" fill="currentColor"></path></svg>====== 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
<file javascript 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>
  );
}
</file>

ProductsList.js
<code javascript>
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>
  );
}
</code>

===== Using children of component =====

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

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

App.js
<code javascript>
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>
  )
}
</code>