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