Let's Make a Pokémon Themed Note Keeping App in React!

• Poket-Book

  1 12 0.0 JavaScript

  A Pokémon Themed Note Taking App Made with ReactJs.

• kuma

  84 1,942 7.1 Python

  Discontinued The project that powers MDN. (by mdn)

  

//Favorites.js import React from 'react'; import {Col, Row} from 'react-bootstrap'; //Initiate the Faves function that will display our main display components, ie the link, button, and category function Faves ({ favorite, visitFaves, index, removeFaves }) { return ( {/*displays link*/} {favorite.text} {/*deletes favorite*/} removeFaves(index)} className="btn btn-icon-trash"> button> visitFaves(index)} className="btn btn-icon-redo"> button> ); } //sets our initial state of our fave list to null function FaveForm({ addFaves }) { const [value, setValue] = React.useState(""); const handleSubmit = e => { e.preventDefault(); if (!value) return; addFaves(value); setValue(""); }; //returns a form to add a new fave item to our list return ( setValue(e.target.value) }/> Favorite!💖 ); } //FavoriteLinks function ties it together function FavoriteLinks() { const [favorites, setFaves] = React.useState([ //default values are passed for display purposes { text: "https://www.youtube.com" }, { text: "https://github.com/christinec-dev" }, { text: "https://developer.mozilla.org/" } ]); //adds a favorite to the list const addFaves = text => { const newFaves = [...favorites, { text}]; setFaves(newFaves); }; //deletes the favorite from list const removeFaves = index => { const newFaves = [...favorites]; newFaves.splice(index, 1); setFaves(newFaves); }; //deletes the favorite from list const visitFaves = index => { const newFaves = window.location.href=`{favorite.text}`; setFaves(newFaves); }; //renders the main ui of to do list return (

FAVORITE SITES

Website

Modify

{/*maps over todo items and instantiates functions for existing items*/} {favorites.map((favorite, index, category) => ( ))} {/*form to add a new item*/}

); } //exports for use in other files export default FavoriteLinks;

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project