Пропс компоненти у React-у

У претходној лекцији смо приказали неколико инстанци производа:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

Засад сваки позив тага производа приказује исту ствар на екрану. Хајде сада да учинимо сваки производ јединственим.

Нека, на пример, сваки производ има назив и цену. Учинимо тако да сваки позив тага производа прикаже производ са својим именом и ценом, форматираним у жељени изглед.

За то треба да предузмемо неколико корака.

За почетак, при позиву тага производа, у таг ћемо уписати два атрибута: атрибут name са називом производа и атрибут cost са ценом, ево овако:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

Имена и вредности ових атрибута ће стизати у виду објекта у први параметар функције-конструктора наше компоненте Product:

jsxfunction Product(props) {
  console.log(props); // објекат са кључевима name и cost
  
  return <p>
    product
  </p>;
}

Име параметра може бити било које, али у React-у је уобичајено да се зове props. То заправо није само име параметра, већ важна концепција React-а.

Суштина ове концепције је следећа: при позиву тага компоненте у таг се могу уписати атрибути са подацима. Ови подаци ће стизати у пропсе компоненте. Затим компонента може да користи те податке, на пример, за формирање жељеног изгледа.

Хајде да то урадимо:

jsxfunction Product(props) {
  return <p>
    name: <span>{props.name}</span>,
    cost: <span>{props.cost}</span>
  </p>;
}

Погодније и уобичајеније је да се не користи објекат props, већ одмах изврши деструктурирање пропса директно у параметрима функције:

jsxfunction Product({ name, cost }) {
  return <p>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </p>;
}