React b1e2

[gk3000]

Is missing bestsellers section, you need to loop through the products and if bestSeller : true put it to the bestsellers section, if false -- to the normal products section.

Overall so far so good!!

[joanmarch]

Yes, I know. I stopped because I found it quite tricky and slow to style all the tags as I was doing...
You say in a video that is a good practice to define styles in the same component when using react, this way the components is reusable in other apps.
Is there any way I can use selectors like in css?¿ I am not sure how to define some rules like flex: 1 1 200px or other shorthand. In this exercise I tried to apply a flex container but I do not why my elements are not shown in same row, it seems it does not catch the rules display flex....
In general I am quite confuse about how to apply styles rules using react in a efficient way...

[gk3000]

Hi Joan.

If you have your CSS in a .css file then you can use the same logic for selectors with elements, classes and ids, the only difference is that to add a class in React you use className='banana' not class='banana'

flex: 1 1 200px means that the basis (optimal) size of the element is 200 px and then it can grow and shrink to take all the available space. So if you apply this property on 3 elements in your container they will equally take all the horizontal space: https://gitlab.com/gk3000/curriculum_2019/blob/master/_css/32.-Flex-properties.md

The reason your flex is not working in this exercise is because you need to apply display: flex; to the direct parent of the items which you want to flex with flex: 1 1 100px;, in your case its not like this, if you'd inspect the DOM in devtools you will see that after your flex container you have div without any stiles and inside this div you have your flex items. So to fix it inside your Main.js apply

flexcontainer:{
    display: 'flex',
    justifyContent: 'space-around',
    flexWrap : 'wrap'
  }

to a div which contains {looper} instead of applying those styles in App.js.

Also, it would be much handier to have you exercises repo on gitlab with access granted to gk3000 and stefano8 (at least 'reporter' level) and having your questions in the "Issues" section of original repo: https://gitlab.com/gk3000/BCS_JS_BOOTCAMP_FILES_TDD/issues

Thanks!