How to render LISTS in React 📃

Рет қаралды 33,032

Күн бұрын

Пікірлер: 46

@BroCodez 11 ай бұрын

import List from './List.jsx' function App() { const fruits = [{id: 1, name: "apple", calories: 95}, {id: 2, name: "orange", calories: 45}, {id: 3, name: "banana", calories: 105}, {id: 4, name: "coconut", calories: 159}, {id: 5, name: "pineapple", calories: 37}]; const vegetables = [{id: 6, name: "potatoes", calories: 110}, {id: 7, name: "celery", calories: 15}, {id: 8, name: "carrots", calories: 25}, {id: 9, name: "corn", calories: 63}, {id: 10, name: "broccoli", calories: 50}]; return( {fruits.length > 0 && } {vegetables.length > 0 && } ); } export default App import PropTypes from 'prop-types'; function List(props){ const category = props.category; const itemList = props.items; //itemList.sort((a, b) => a.name.localeCompare(b.name)); // SORT ALPHABETICAL //itemList.sort((a, b) => a.calories - b.calories); // SORT BY CALORIES //const lowCalItem = itemList.filter(item => item.calories < 100); // FILTER LOW CALORIES //const highCalItem = itemList.filter(item => item.calories >= 100); // FILTER HIGH CALORIES const listItems = itemList.map(item => {item.name}:   {item.calories}); return( {category} {listItems} ); } List.propTypes = { category: PropTypes.string, items: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, calories: PropTypes.number})), } List.defaultProps = { category: "Category", items: [], } export default List .list-category{ font-size: 2.5em; font-weight: bold; color: hsl(0, 0%, 20%); margin-bottom: 10px; text-align: center; border: 3px solid; border-radius: 5px; background-color: hsl(185, 100%, 50%); } .list-items li{ font-size: 2em; list-style: none; color: hsl(0, 0%, 25%); text-align: center; margin: 0; } .list-items li:hover{ color: hsl(0, 0%, 45%); cursor: pointer; }

@tee-hee9553 10 ай бұрын

teacher, why we need to do those stuff like download npm create npm create vite@latest npm install, npm run dev, I see on other website they only import react like react/client or something, so when create an web application do we need to use import or create my-react-app and run I don't really understand about this it's confuse me I though I learn in a wrong way so confuse please if you have time answer me

@leivashenriquedelucenaaqui1126 9 ай бұрын

the best teacher ever!!!!!!!!!!!!!!!!!!!!!!!!!! thanks from brazil, we all aprecciate your classes!!!! you're born to teach!!!

@shreehari2589 11 ай бұрын

Since you already have JavaScript course can you upload react videos more often please, I think lot of people are waiting for react videos

@RockySharma-gp5th 11 ай бұрын

I Agree with you bro.

@Rohan-cn4ji 19 күн бұрын

this is literally the best thanks sm brocode

@TheLaidBackOne02015 11 ай бұрын

Bro code, you're the absolute goat!

@GRAVKEN 11 ай бұрын

Thank you , I really searched a lot for a good and entertaining tutorial about listing in specific!

@Waltuh7862 11 ай бұрын

Bro, I found your videos recently and they’ve been a godsend for me while studying in school and building my portfolio. I wanted to ask, have you considered doing a series on API’s?

@natureshour499 11 ай бұрын

He is too amazing bro I love his affords a lot because no 1 in youtube is providing so much of perfect education course for free.I love bro code ❤

@Raghad-hy9cr 10 ай бұрын

Totally agree! He is amazing at breaking down complex concepts into understandable ones, and API’s have a really bad learning curve (at least for me)😢. it needs someone like him to explain it in order for me to understand it

@WandaNice-o7s 2 ай бұрын

heyyy this tutorial is very helpful!!! thanks

@enescagrbayraktutan6329 11 ай бұрын

You are a beast bro, keep up the good work man! please focus more on this course instead of javascript

@latifmoruf6720 2 ай бұрын

Excellent concept of teaching

@vestorp 11 ай бұрын

Thanks bro for your efforts, I learned alot from you 😁

@danielmelek9348 11 ай бұрын

Bro you are the real MVP 💐💐

@ayMillmusic 6 ай бұрын

Great video! Thanks!

@AdemGassouma-z4y 8 ай бұрын

thanks u make my life easy bro

@SoapCS2 11 ай бұрын

React full course coming?

@hunin27 11 ай бұрын

thanks Bro !!! ❤

@natureshour499 11 ай бұрын

Bro code i am your big fan bro just 1 request i know it will be hard but if you will get time than please can you upload the video of Cypher security full course bro because its full course fee is too high bro, its not any pressure because i can understand bro in our daily life we don't get time but still if you can do it little by little than please have a look on it brother thankyou ❤

@danialalfayyadh2524 9 ай бұрын

Maybe I Got Error at 3:10 and I search the answer and I got the answer like this : function List() { const fruits = ["Apple", "Banana", "Coconut", "Pineapple", "Salak"]; const listItems = fruits.map(fruit => {fruit}); return ( {listItems} ); } export default List; And That's Work

@life_with_rauf 10 ай бұрын

which os yuh using bro

@Delicatamente 5 ай бұрын

huge thanks!

@danishsaifi7817 11 ай бұрын

I don't know anything about react but i am first here 😂❤

@Turkishoflegend 11 ай бұрын

nope you are not

@DarkM999 11 ай бұрын

we need video for rust programming language

@hellomihai 7 ай бұрын

he was saying *lowCalFruit*... I thought he was saying *localeFruit*... I need a break 🤣

@utilizator500 11 ай бұрын

Ok now do Angular pls

@thangavel_st 11 ай бұрын

❤

@nebularzz 11 ай бұрын

im tired and i read the title as "how to racist" when it appeared in my notifications

@peaklegacy146 10 ай бұрын

accidently went back to default settings for a second😂

@abududivine6345 11 ай бұрын

First

@uff_statuss_ 5 ай бұрын

category used for ???? @BroCodez

@v.a2282 11 ай бұрын

I learnt javascript from u and I was looking forward to learning react and u started making this series right then!! Thank you so much bro u have changed my life by making programming so interesting! Your hard work is very much appreciated