How to render LISTS in React 📃

[@BroCodez]

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]

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

[@shreehari2589]

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]

I Agree with you bro.

[@natureshour499]

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 ❤

[@hellomihai]

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

[@Waltuh7862]

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]

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]

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

[@v.a2282]

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

[@Jamal_Almansoub]

😂a random comment😂
I don't know "React"
But I learn "Java"
And like your videos

[@owenerhabor]

You're the best !!!

[@WandaNice-o7s]

heyyy this tutorial is very helpful!!! thanks

[@Rohan-cn4ji]

this is literally the best thanks sm brocode

[@unsjvr]

can't wait for the tutorial about hooks. I've watched a lot of tutorials about react hooks but still could not grasp it 😭

[@leivashenriquedelucenaaqui1126]

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

[@danialalfayyadh2524]

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

[@TheLaidBackOne02015]

Bro code, you're the absolute goat!

[@max0206may]

@BroCodez Nice content ;) - Thanks I really appreciate your work and dedication

[@sakiasibaleiwaikomai]

Upload more please

[@Divine_2468]

Bro Code, I just wanted to ask if you could make a video on kivy. I would really appreciate that if you are able to.

[@lyawileh.a8741]

Best instructor ever! You've made learning React a breeze.

[@GRAVKEN]

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

[@enescagrbayraktutan6329]

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

[@ayMillmusic]

Great video! Thanks!

[@NapoleanBonaparte-bv2hz]

Thanks a lot, now please upload the full version of react tutorial like you did with the rest.

[@RockySharma-gp5th]

I'm also waiting for full video

[@uff_statuss_]

category used for ???? @BroCodez

[@DarkM999]

we need video for rust programming language

[@latifmoruf6720]

Excellent concept of teaching

[@vestorp]

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

[@utilizator500]

Ok now do Angular pls

[@AdemGassouma-z4y]

thanks u make my life easy bro

[@SoapCS2]

React full course coming?

[@nebularzz]

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

[@peaklegacy146]

accidently went back to default settings for a second😂

[@Delicatamente]

huge thanks!

[@life_with_rauf]

which os yuh using bro

[@danielmelek9348]

Bro you are the real MVP 💐💐

[@danishsaifi7817]

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

[@Turkishoflegend]

nope you are not

[@adamgamer1711]

[@Gabriel-yf8ke]

Thanks! Really useful!

[@hunin27]

thanks Bro !!! ❤

[@abududivine6345]

First

[@thangavel_st]

❤