How to render LISTS in React 📃 

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}: &nbsp; {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; }

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

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

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?

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

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

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

Bro code, you're the absolute goat!

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

this is literally the best thanks sm brocode

You're the best !!!

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

Excellent concept of teaching

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

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

Bro you are the real MVP 💐💐

Great video! Thanks!

heyyy this tutorial is very helpful!!! thanks

thanks u make my life easy bro

Thanks! Really useful!

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

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

React full course coming?

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.

thanks Bro !!! ❤

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 ❤

which os yuh using bro

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

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

we need video for rust programming language

Upload more please

Ok now do Angular pls

❤

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

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

First

huge thanks!

category used for ???? @BroCodez