Richest people in the world React Tutorial - useState , map and loop through array
Eat the rich with React, JS, Chakra UI
Table of contents
- 1. Install Vite + give your project a name and choose React/typescript
- 2. Install Chakra UI
- 3. Set up a Richy component function
- 4. Set up data.ts
- 5. Set up use state and pass in the array as the initial state variable
- 6. Set up the map method and loop through the array
- 7. Iterate and deconstruct data
- 8. Setup button, onClick, and pass empty array
- 9. Setup remove button and function
Hey Developers! ๐ I hope you enjoy this little project.
FYI: useState helps us to re-render the web page. You can learn more here w3schools
1. Install Vite + give your project a name and choose React/typescript
npm create vite@latest
2. Install Chakra UI
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
3. Set up a Richy component function
import { Box, Heading } from "@chakra-ui/react"
const Richy = () => {
return (
<Box>
<Heading>
Hi
</Heading>
</Box>
)
}
export default Richy
4. Set up data.ts
export const data = [
{ id: 1, name: 'Elon Musk', worth: '199.8B'},
{ id: 2, name: 'Bernard Arnault', worth: '176.6B'},
{ id: 3, name: 'Gautam Adani', worth: '146.5B'},
{ id: 4, name: 'Jeff Bezos', worth: '124.1B'},
{ id: 5, name: 'Warren Buffett', worth: '108.4B'},
{ id: 6, name: 'Bill Gates', worth: '105.0B'},
{ id: 7, name: 'Larry Ellison', worth: '101.4B'},
{ id: 8, name: 'Mukesh Ambani', worth: '94.7B'},
{ id: 9, name: 'Carlos Slim Helu', worth: '94.7B'},
{ id: 10, name: 'Larry Page', worth: '83.6B'},
]
5. Set up use state and pass in the array as the initial state variable
import { Box, Heading } from "@chakra-ui/react"
import React from "react"
import { data } from './data'
const Richy = () => {
const [rich, setRich] = React.useState([data])
return (
<Box>
<Heading>
Hi
</Heading>
</Box>
)
}
export default Richy
6. Set up the map method and loop through the array
import { Box, Heading } from "@chakra-ui/react"
import React from "react"
import { data } from './data'
const Richy = () => {
const [rich, setRich] = React.useState(data)
return (
<Box>
<Heading>{rich.map((people) =>{
console.log(rich);
return "hi"
})}</Heading>
</Box>
);
};
export default Richy
7. Iterate and deconstruct data
import { Box, Heading } from "@chakra-ui/react"
import React from "react"
import { data } from './data'
const Richy = () => {
const [rich, setRich] = React.useState(data)
return (
<>
{rich.map((people) => {
const { id, name, worth } = people
return (
<Box key={id} backgroundColor="pink" mt="5">
<Heading>{name}</Heading>
<h4>{worth}</h4>
</Box>
)
})}
</>
);
};
export default Richy
8. Setup button, onClick, and pass empty array
import { Box, Button, Heading } from "@chakra-ui/react"
import React from "react"
import { data } from './data'
const Richy = () => {
const [rich, setRich] = React.useState(data)
return (
<>
{rich.map((people) => {
const { id, name, worth } = people
return (
<Box key={id} backgroundColor="pink" mt="5">
<Heading>{name}</Heading>
<h4>{worth}</h4>
</Box>
)
})}
<Button color="white" backgroundColor="red" mt="5" onClick={()=> setRich([])}>Clicky</Button>
</>
);
};
export default Richy
9. Setup remove button and function
import { Box, Button, Heading } from "@chakra-ui/react"
import React from "react"
import { data } from './data'
const Richy = () => {
const [rich, setRich] = React.useState(data)
const removeItem = (id: any) => {
let newRich = rich.filter((people) => people.id !== id);
setRich(newRich);
};
return (
<>
{rich.map((people) => {
const { id, name, worth } = people
return (
<Box key={id} backgroundColor="pink" mt="5">
<Heading>{name}</Heading>
<h4>{worth}</h4>
<Button onClick={() => removeItem(id)}>Eat one of the Rich</Button>
</Box>
)
})}
<Button color="white" backgroundColor="red" mt="5" onClick={()=> setRich([])}>Eat the Rich</Button>
</>
);
};
export default Richy
ย