Metapunk Web3 Community πŸ¦™

Metapunk Web3 Community πŸ¦™ is a community of amazing Web3, Blockchain and Metaverse enthusiasts

We’re a community where blockchain builders and makers, web3 devs, and metaverse creators can connect, learn and share πŸ¦™

Create account Log in
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';

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(() => {
  ).then((res) => {
}, []);

  return (
    <div className="App">
      <h1 className='title' >Cryptocurrency Finder</h1>
      placeholder='search (only small letters) ...'
      onChange={(e)=> {
            <td>Market Cap</td>
            <td>Available Supply</td>
       {/* Mapping all the cryptos */}
      {/* filtering to check for the searched crypto */}
      {/* ------------------------------------------ */}

      .filter((val)=> {return
      .map((val, id)=> {
              return (
                  <tr id="id">
                    <td className="rank">{val.rank}</td>
                    <td className="logo">
                      <a href={val.websiteUrl}>
                    <td className="symbol">{val.symbol}</td>


export default App;
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

lee profile image


bekbrace profile image
Bek Brace Author • Edited on

Thank you, Lee :)

lee profile image

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

Thread Thread
bekbrace profile image
Bek Brace Author


Thread Thread
lee profile image

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