Metapunk Web3 Community

Cover image for Create a Cryptocurrency finder with React
Bek Brace
Bek Brace

Posted on

Create a Cryptocurrency finder with React

This is me being relaxed home on weekend and writing this little yet powerful application that find the price, capital market, crypto and other data for any cryptocurrency you search for.
I have used React js using react hooks useState and useEffecthooks.

I am not professional with React, but the apps that I create and I find interesting to share and help the community with, I don't hesitate to do so.

This is the App.jsx code - if you're interested to take a look to the code [ with comments :) ]

import './App.css';
// install axios
// npm i axios
import Axios from 'axios';
import {useState, useEffect} from 'react';
// https://documenter.getpostman.com/view/5734027/RzZ6Hzr3?version=latest

function App() {
// Setting up the initial states using react hook 'useState'
const [search, setSearch] = useState("");
const [crypto, setCrypto] = useState([]);

// Fetching crypt data from the API only 
// once when the component is mounted
// i forgot to tell you that you may
// want to know about React  life cycle.

// code here to fetch API using useEffect
useEffect(() => {
  Axios.get(
`https://api.coinstats.app/public/v1/coins?skip=0&limit=100¤cy=INR`
  ).then((res) => {
    setCrypto(res.data.coins);
  });
}, []);


  return (
    <div className="App">
      <h1 className='title' >Cryptocurrency Finder</h1>
      <input 
      type="text"
      placeholder='search (only small letters) ...'
      onChange={(e)=> {
          setSearch(e.target.value)
      }}/>
      <table>
        <thead>
          <tr>
          <td>Rank</td>
            <td>Name</td>
            <td>Symbol</td>
            <td>Market Cap</td>
            <td>Price</td>
            <td>Available Supply</td>
          </tr>
        </thead>
       {/* Mapping all the cryptos */}
      <tbody>
      {/* filtering to check for the searched crypto */}
      {/* ------------------------------------------ */}

      {crypto
      .filter((val)=> {return val.name.toLowerCase()
      .includes(search)})
      .map((val, id)=> {
              return (
                <>
                  <tr id="id">
                    <td className="rank">{val.rank}</td>
                    <td className="logo">
                      <a href={val.websiteUrl}>
                        <img 
                        src={val.icon} 
                        alt="logo"
                        width="30px"/>
                      </a>
                      <p>{val.name}</p>
                    </td>
                    <td className="symbol">{val.symbol}</td>
                    <td>{val.marketCap}</td>
                    <td>{val.price}</td>
                    <td>{val.availableSupply}</td>
                  </tr>
                </>
              )
            }
          )}


      </tbody>
      </table>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Discussion (5)

Collapse
lee profile image
lee

Nice!!

Collapse
bekbrace profile image
Bek Brace Author • Edited on

Thank you, Lee :)

Collapse
lee profile image
lee

How do render your React in this scenario? client or server side?

Thread Thread
bekbrace profile image
Bek Brace Author

client

Thread Thread
lee profile image
lee

Nice - at what point (if any) do you think you'd need to switch to pre render?