{"componentChunkName":"component---src-templates-page-tsx","path":"/page/9","result":{"pageContext":{"searchData":[{"id":"cjjg9ui0t303s010375m42b9w","title":"Turn a Browser Window into a Notepad with This One-Liner","slug":"/turn-a-browser-window-into-a-notepad-with-this-one-liner","avatar":"https://s3.amazonaws.com/contentkit/static/cjjg9ui0t303s010375m42b9w/OYIaJ1KK_400x400(1).png","date":"July 1, 2020"},{"id":"cjiy7xl9o17w701039gvl18a5","title":"Creating a Collaborative Editor with Draftjs for Fun","slug":"/draft-js-collaborative-editor","avatar":"https://s3.amazonaws.com/contentkit/static/cjiy7xl9o17w701039gvl18a5/draft-js.png","date":"June 28, 2020"},{"id":"cjeqgfsdsnmx90167n7j290kt","title":"How To Include SASS In Your React Project","slug":"/sass-react-webpack","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfsdsnmx90167n7j290kt/parcel-bundler.png","date":"May 1, 2020"},{"id":"cjiy4tseq0tnw0103bc5s7sxj","title":"How to Add a Loading Indicator to Material Ui's Component","slug":"/creating-a-material-ui-button-with-spinner-that-reflects-loading-state","avatar":"https://s3.amazonaws.com/contentkit/static/cjiy4tseq0tnw0103bc5s7sxj/material-ui.png","date":"January 28, 2020"},{"id":"cjkq4u7470ihr0157ad175b12","title":"Connecting to AWS Lambda via WebSockets","slug":"/connecting-to-aws-lambda-via-websockets","avatar":"https://s3.amazonaws.com/contentkit/static/cjkq4u7470ihr0157ad175b12/MQTT.js.png","date":"January 12, 2020"},{"id":"cjeqgfnhknnpe0199zbfwwkd8","title":"6 Really Cool APIs to Have Fun With","slug":"/cool-apis-to-have-fun-with","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfnhknnpe0199zbfwwkd8/scale-api.png","date":"January 1, 2020"},{"id":"cjeqgftvknnr30199dvw266qh","title":"Installing Node Canvas in AWS Lambda","slug":"/node-canvas-aws-lambda","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgftvknnr30199dvw266qh/aws-lambda.jpg","date":"December 31, 2019"},{"id":"cjn5fv8kl0pfj0124wwebufms","title":"GoLang Cheatsheet","slug":"/golang-cheatsheet","avatar":"https://s3.amazonaws.com/contentkit/static/cjn5fv8kl0pfj0124wwebufms/golang.png","date":"October 13, 2019"},{"id":"cjn15y8740liw0175u3s707eh","title":"Scheduled Jobs & Work Queues With Postgresql","slug":"/scheduled-jobs-work-queues-with-postgresql","avatar":"https://s3.amazonaws.com/contentkit/static/cjn15y8740liw0175u3s707eh/kxHkAenZ_400x400.jpg","date":"October 8, 2019"},{"id":"cjmym86fh0jy1013398nfzuqu","title":"Creating a Bot to Refill Parking Meters Using AWS Lambda","slug":"/creating-a-bot-to-refill-parking-meters-using-aws-lambda","avatar":"https://s3.amazonaws.com/contentkit/static/cjmym86fh0jy1013398nfzuqu/prwHMlRn_400x400.jpg","date":"October 7, 2019"},{"id":"cjmsaqt6l09le01046qeukpp9","title":"The USPS Tracking API: How To Track Packages","slug":"/usps-tracking-api","avatar":"https://s3.amazonaws.com/contentkit/static/cjmsaqt6l09le01046qeukpp9/usps.png","date":"October 3, 2019"},{"id":"cjeqgfuyenmy20167rycnmiql","title":"Stormpath vs Firebase - A Side-By-Side Comparison","slug":"/stormpath-vs-firebase-a-side-by-side-comparison","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfuyenmy20167rycnmiql/m3cEA33V_400x400.jpg","date":"September 2, 2019"},{"id":"cjeqgfv88nnrt01997wxd4rnl","title":"Sending emails with Firebase Cloud Functions","slug":"/firebase-functions-sending-emails","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfv88nnrt01997wxd4rnl/firebase.jpg","date":"September 2, 2019"},{"id":"cjeqgfqjknnq20199oe3zwi37","title":"Deploying To DigitalOcean From Travis","slug":"/deploying-to-digitalocean-travis","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfqjknnq20199oe3zwi37/digitalocean.jpeg","date":"August 25, 2019"},{"id":"cjkvpbr6p06z50181fg7xvsc3","title":"Circumventing AWS Lambda's Bundle Size Limit","slug":"/circumventing-aws-lambdas-bundle-size-limit","avatar":"https://s3.amazonaws.com/contentkit/static/cjkvpbr6p06z50181fg7xvsc3/b2lWK7c0_400x400.png","date":"August 15, 2019"},{"id":"cjiy45h7m0iba0111f5imt5em","title":"A Quick Way to List All Unicode Characters (Javascript)","slug":"/unicode-characters-javascript","avatar":"https://s3.amazonaws.com/contentkit/static/cjiy45h7m0iba0111f5imt5em/unicode.png","date":"July 29, 2019"},{"id":"ci1rxc41tm8yi7nd156pz9dom","title":"Kibana Rest API","slug":"/kibana-rest-api","avatar":"https://s3.amazonaws.com/contentkit/static/ci1rxc41tm8yi7nd156pz9dom/elastic.png","date":"July 24, 2019"},{"id":"cjeqgfjgennmw0199wha3j6u0","title":"Airtable As A Database For Middleman [Tutorial]","slug":"/airtable-middleman-database","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfjgennmw0199wha3j6u0/airtable-books.png","date":"June 1, 2019"},{"id":"cjeqgfj5qnnmr0199vzd85xuo","title":"Building A Multiplayer Game With Three.Js + WebSockets","slug":"/multiplayer-game-threejs","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfj5qnnmr0199vzd85xuo/three.jpg","date":"June 1, 2019"},{"id":"cjeqgfi8hnnml0199f1jyo1p5","title":"The Best Sketch Plugins","slug":"/the-best-sketch-plugins","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfi8hnnml0199f1jyo1p5/sketch.png","date":"June 1, 2019"},{"id":"d9920hsu8y7365frf2c6fxrx2","title":"Configuring Vault by Hashicorp in AWS EC2","slug":"/configuring-vault-by-hashicorp-in-aws-ec2","avatar":"https://s3.amazonaws.com/contentkit/static/d9920hsu8y7365frf2c6fxrx2/vault.png","date":"April 15, 2019"},{"id":"cjeqgfvsfnns00199mlbff48i","title":"Best Zapier Alternatives","slug":"/best-zapier-alternatives","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfvsfnns00199mlbff48i/zapier-alternative-workato.png","date":"January 31, 2019"},{"id":"cjn3l18390lyt0158i8qxs5dc","title":"Running A Simple Node Web Server On AWS EC2","slug":"/running-a-simple-node-web-server-on-aws-ec2","avatar":"https://s3.amazonaws.com/contentkit/static/cjn3l18390lyt0158i8qxs5dc/aws.png","date":"October 11, 2018"},{"id":"cjeqgfr4snmwz01673m8l4i51","title":"Graph.Cool vs Firebase","slug":"/graphcool-vs-firebase","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfr4snmwz01673m8l4i51/graphcool.png","date":"October 7, 2018"},{"id":"cjklurup00k0201739mflg9sz","title":"Accessing Redis on an Aws EC2 Instance from the Outside\t","slug":"/accessing-redis-on-an-aws-ec2-instance-from-the-outside","avatar":"https://s3.amazonaws.com/contentkit/static/cjklurup00k0201739mflg9sz/logo.jpeg","date":"August 9, 2018"},{"id":"cjkfzvvxt08up0191l38aadq4","title":"Using PDFtk in AWS Lamba","slug":"/using-pdftk-in-aws-lamba","avatar":"https://s3.amazonaws.com/contentkit/static/cjkfzvvxt08up0191l38aadq4/pdftk.png","date":"August 4, 2018"},{"id":"cjeqgfqsgnnq70199l4vc6vim","title":"Configuring WebSockets on Elastic Beanstalk/EC2","slug":"/websockets-aws-elasticbeanstalk-ec2","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfqsgnnq70199l4vc6vim/aws.png","date":"July 15, 2018"},{"id":"cjit96q2yk0is0111qpbmw66s","title":"Getting Started With Gmail API","slug":"/gmail-api-quickstart","avatar":"https://s3.amazonaws.com/contentkit/static/cjit96q2yk0is0111qpbmw66s/gmail.png","date":"June 28, 2018"},{"id":"cjeqgfo23nmwd0167ynqe7xi8","title":"5 Tips For Using NextJs","slug":"/5-tips-for-using-nextjs","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfo23nmwd0167ynqe7xi8/bHjpwZem_400x400.png","date":"June 1, 2018"},{"id":"cjhxixcyhw4ze01035butoukz","title":"React unstable_deferredUpdates","slug":"/react-unstable_deferredupdates","avatar":"https://s3.amazonaws.com/contentkit/static/cjhxixcyhw4ze01035butoukz/OYIaJ1KK_400x400(1).png","date":"June 1, 2018"},{"id":"cjeqgflpnnnoy01993y7aez8a","title":"Simple Web Scraping With Javascript","slug":"/simple-web-scraping","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgflpnnnoy01993y7aez8a/developer-tools-scraping.png","date":"May 1, 2018"},{"id":"cjeqgfk9lnnn101994ll4ursr","title":"Easy: Add Firebase Facebook Login To Your React App","slug":"/firebase-facebook-login-react","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/firebase.png","date":"May 1, 2018"},{"id":"cjeqgfiqrnmtj0167dmz5g5dg","title":"The 5 Best Static Site Web Hosts","slug":"/the-5-best-static-site-web-hosts","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfiqrnmtj0167dmz5g5dg/digital-ocean.png","date":"May 1, 2018"},{"id":"cjeqgfmi2nmvs01670pgebekn","title":"Tips and Tricks For Using NightmareJs","slug":"/nightmare-js","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfmi2nmvs01670pgebekn/nightmare.png","date":"May 1, 2018"},{"id":"cjeqgfkqennn60199707yp1fb","title":"Why You Should Create Your Next React Web App With Firebase","slug":"/firebase-react-tutorial","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfkqennn60199707yp1fb/firebase.jpg","date":"May 1, 2018"},{"id":"cjeqgfpr6nnpx019978qzmaok","title":"How to Flush Data From Heroku Redis","slug":"/heroku-redis-flushall","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfpr6nnpx019978qzmaok/3wgIDj3j_400x400.png","date":"April 1, 2018"},{"id":"cjeqgfm8xnnp30199vxndhkgh","title":"5 Ways To Style React Components","slug":"/5-ways-to-style-react-components","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgflz7nmvm0167yo7wsjg3","title":"Delete Spreadsheet Rows For Google Sheets","slug":"/delete-rows-google-sheets","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgfp84nnps0199dvru09ll","title":"Make An Uptime Monitoring Microservice In Under 50 Lines of Code","slug":"/twilio-uptime-monitoring-node-tutorial","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgfri4nnqd0199zsv6a9fl","title":"Hexo - The Best Static Site Generator? ","slug":"/deploy-a-hexo-blog","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgfoygnnpn0199f31dgk9m","title":"Airtable As A Minimum Viable Database For Your ReactJs Project","slug":"/airtable-reactjs","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfoygnnpn0199f31dgk9m/airtable-screenshot.png","date":"March 2, 2018"},{"id":"cjeqgfn6pnmw0016793f81hpx","title":"The Advanced Guide To ReactJs Checkboxes","slug":"/reactjs-checkboxes","avatar":null,"date":"January 20, 2018"},{"id":"cjeqgfe8znnly01991jo5xkxx","title":"Minimum Viable GraphQL QuickStart","slug":"/minimum-viable-graphql-quickstart","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfe8znnly01991jo5xkxx/graphcool-schema.png","date":"January 1, 2018"},{"id":"cjeqgfgegnnmb0199jp3hv2xx","title":"How To Add A Contact Form To Your Ghost Blog","slug":"/ghost-blog-contact-form","avatar":null,"date":"November 1, 2017"},{"id":"cjeqgfmvxnnp90199bdti4r8n","title":"PHP Scraping Tutorial - Scrape Reddit With Goutte","slug":"/php-scraping-tutorial-scrape-reddit-with-goutte","avatar":null,"date":"October 7, 2017"},{"id":"cjeqgfpz1nmwp0167c5j46eij","title":"Cannot read property 'loose' of undefined","slug":"/cannot-read-property-loose-of-undefined","avatar":null,"date":"August 25, 2017"},{"id":"cjeqgftlanmxg0167zipvfzp1","title":"Airtable API Example & Tutorial - Generating Charts","slug":"/airtable-api-example-tutorial","avatar":null,"date":"January 31, 2017"},{"id":"cjeqgfphbnmwk0167ldz2mv2q","title":"React onClick Example and Tutorial","slug":"/react-onclick-example-and-tutorial","avatar":null,"date":"January 2, 2017"},{"id":"cjeqgfq8ynmwu0167z6c51ynp","title":"React Tables - How To Render Tables In ReactJS","slug":"/reactjs-tables","avatar":null,"date":"January 2, 2017"},{"id":"cjeqgfuoznmxu0167ayt2zkc3","title":"How To Add A Class in ReactJS","slug":"/reactjs-add-class","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfu6gnnrb0199nyrddra0","title":"Fetching Github Blame with the GraphQL API V4","slug":"/github-blame-graphql-api-v4","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfsmsnnqo0199o2x7dl4x","title":"How To Add Meta Descriptions to Middleman Pages","slug":"/middleman-meta-descriptions","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfs2wnnqi0199rco2vvz2","title":"Zapier Webhook Post Example & Tutorial","slug":"/zapier-webhook-post-example-tutorial","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfvhunmy90167t6ouqfmb","title":"Setting Up A Job Queue For A Node App [Tutorial]","slug":"/job-queue-node","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgftbcnnqy0199nc1f92te","title":"NextJs vs Create-React-App - A Side-By-Side Comparison","slug":"/nextjs-vs-create-react-app","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgft2pnnqt01990ty8fmeu","title":"How To Create A Modal In ReactJS [Tutorial]","slug":"/reactjs-modal","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfugpnnrj0199x7anb33t","title":"How To Use Twilio With ReactJS","slug":"/reactjs-twilio-example-tutorial","avatar":null,"date":"March 14, 2018"}],"page":9,"offset":45,"total":57,"nodes":[{"id":"cjeqgfpz1nmwp0167c5j46eij","title":"Cannot read property 'loose' of undefined","slug":"cannot-read-property-loose-of-undefined","published_at":"2017-08-25T19:42:40.06","created_at":"2018-03-14T02:16:38","excerpt":"Cannot read property 'loose' of undefined","image":null,"posts_tags":[],"date":"August 25, 2017","html":"
This error message is associated with Babel7.
\nThe cause of the error is mixing Babel 6 and Babel 7. Babel 7 is incompatible with Babel 6. Therefore your entire project must rely on Babel 7. If you check the stack trace you might see references to `node_modules/babel-core`. This means that your project has Babel 6 dependencies.
\nMake sure that you've installed all the correct babel 7 dependencies, e.g.:
\nIn my case, I had installed babel-cli globally (e.g. npm i -g babel-cli). This is not recommended. Babel-cli should be installed locally in dev-dependencies with:
\nnpm i @babel/cli --dev
\nWith a local install you can be confident that you're really using Babel 7 cli instead of Babel 6 cli.
\nNextJs, for example, depends on Babel 6. Therefore it's currently impossible to use Babel 7 in a Nextjs project.
\nBabel 7 was only recently released and in time more projects will adopt Babel 7.
\nAirtable is a user-friendly spreadsheet but can be used as a lightweight database. In this tutorial I'll show you how to fetch data from your spreadsheet using the Airtable API. Next, we'll take the data and draw a chart using chart.js.
\nHere's a live example.
\nNeed help finding your Airtable API key? Go to http://www.airtable.com/api when logged in, select the the base you'll be working with and check \"show API key.\"
\nHere's how to make a request using Airtable's API.
\n$api_key = 'YOUR_API_KEY';\n$base = 'YOUR_SPREADSHEET_ID';\n$table = 'YOUR_TABLE_NAME';\n$airtable_url = 'https://api.airtable.com/v0/' . $base . '/' . $table;\n$url = 'https://api.airtable.com/v0/' . $base . '/' . $table . '?maxRecords=10&view=Main%20View';\n$headers = array(\n 'Authorization: Bearer ' . $api_key\n);\n$ch = curl_init();\ncurl_setopt($ch, CURLOPT_HTTPGET, 1);\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_TIMEOUT, 10);\ncurl_setopt($ch, CURLOPT_HTTPHEADER, $headers);\ncurl_setopt($ch, CURLOPT_URL, $url);\n$entries = curl_exec($ch);\ncurl_close($ch);\n$airtable_response = json_decode($entries, TRUE);
\nThis cURL request fetches the data in your Airtable and converts it to a PHP array with json_decode()
. If your spreadsheet was just a list of groceries, the JSON output would look something like:
\"records\": [\n {\n \"id\": \"recMGvRShuBoKakfY\",\n \"fields\": {\n \"grocery\": \"bread\"\n },\n \"createdTime\": \"2016-10-25T12:18:53.000Z\"\n }\n],\n\"offset\": \"recMGvRShuBoKakfY\"
\nSo we convert the JSON to a PHP array, and create a foreach loop to echo the output as follows:
\nforeach($airtable_response['records']['fields'] as $key => $value) {\n $string.= $value['Data'] . ', ';\n $labels.= '\"' . $value['Label'] . '\", ';\n}\n$data = trim($string, \",\");\n$labels = trim($labels, \",\");\n?>
\n$record['fields']['Data'] is the header of one column in your Airtable, $record['fields']['Label'] is the head of another column.
\nThe next step is to use the javascript library chart.js to display the data.
\nInclude the script in your head
tag as follows. Note that chartjs requires jquery.
\nvar ctx = document.getElementById(\"myChart\");\nvar myChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: [\"Red\", \"Blue\"],\n datasets: [{\n label: '# of Votes',\n data: [12, 19],\n backgroundColor: [\n 'rgba(255, 99, 132, 0.2)',\n 'rgba(54, 162, 235, 0.2)'\n ],\n borderColor: [\n 'rgba(255,99,132,1)',\n 'rgba(54, 162, 235, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n scales: {\n yAxes: [{\n ticks: {\n beginAtZero:true\n }\n }]\n }\n }\n});
\nHere's what the chart looks like (jsfiddle).
\nTo display our Airtable data, we just need to substitute for the data and the labels. There are more elegant ways to accomplish the same thing but this is the quick-and-dirty version.
\nSee the entire source code on github here.
","avatar":null},{"id":"cjeqgfphbnmwk0167ldz2mv2q","title":"React onClick Example and Tutorial","slug":"react-onclick-example-and-tutorial","published_at":"2017-01-02T01:38:28.27","created_at":"2018-03-14T02:16:37","excerpt":"Reasons Why Your React onClick Event Isn't Firing","image":null,"posts_tags":[],"date":"January 2, 2017","html":"event
argument in eventHandler(event)
onClick={eventHandler}
instead of onClick={this.eventHandler}.
\n
Link to Codepen
\nThe following snippet adds the class red when the button is clicked.
\nThings to note:
\nclassName
instead of class with JSX. Example: <div className=\"myclass\"></div>
.\n
Adding a Class vs Setting the Class with this.setState
\nWhat if you already have a class associated with a
Triggering an onClick event for links is fundamentally the same as for buttons.
\n<a href=\"javascript:void(0)\" onClick={this.eventHandler}>{this.state.toggle ? 'Click me' : 'Successfully clicked!'}</a>
\nTo accomplish this you just need to call other functions inside your eventHandler() function.
\nclass extends React.Component {\n anotherFunction() {\n console.log(\"Another function was called!\");\n }\n eventHandler(event) {\n this.anotherFunction();\n this.setState((prevState) => ({\n toggle: !prevState.toggle\n }))\n }\n }
\nBut don't forget to bind both method classes within the constructor:
\nthis.eventHandler = this.eventHandler.bind(this);\nthis.otherFunction = this.otherFunction.bind(this);
\n","avatar":null},{"id":"cjeqgfq8ynmwu0167z6c51ynp","title":"React Tables - How To Render Tables In ReactJS","slug":"reactjs-tables","published_at":"2017-01-02T01:34:51.546","created_at":"2018-03-14T02:16:38","excerpt":"In this tutorial, we'll pass data as a prop to a
In this tutorial, we'll pass data as a prop to a
We'll use the following:
\nprops
- When an element represents a user-defined component, it passes JSX attributes to this component as a single object called props.map()
method, which creates a new array, calling a function on every element of the provided array.To render a table, we need data to display. We'll use an array of javascript objects comprised of vegetables.
\nconst products = [{\n name: \"onion\",\n price: \".99\",\n id: 1\n}, {\n name: \"pepper\",\n price: \"1.25\",\n id: 2\n}, {\n name: \"broccoli\",\n price: \"3.00\",\n id: 3\n}];
\nWe will then map this array of javascript objects to render each name, price, and id, enclosed in
The constant products is passed into
\nReactDOM.render(\n <Table data={products} />,\n document.getElementById(\"root\")\n);
\nWe will split our React table into two components, the
We pass the data as a prop from
const products = [{\n name: \"onion\",\n price: \".99\",\n id: 1\n}, {\n name: \"pepper\",\n price: \"1.25\",\n id: 2\n}, {\n name: \"broccoli\",\n price: \"3.00\",\n id: 3\n}];\nconst TableRow = ({row}) => (\n <tr>\n <td key={row.name}>{row.name}</td>\n <td key={row.id}>{row.id}</td>\n <td key={row.price}>{row.price}</td>\n </tr>\n)\nconst Table = ({data}) = (\n <table>\n {data.map(row => {\n <TableRow row={row} />\n })}\n </table>\n)\nReactDOM.render(\n <Table data={products} />, \n document.getElementById(\"root\")\n);
\nHere's a link to the live CodePen.
\nFor something a little sexier, you can also use Material-UI's table component. Here's how to get started.
\nnpm i material-ui react-tap-event-plugin --save\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';\nimport {\n Table,\n TableBody,\n TableHeader,\n TableHeaderColumn,\n TableRow,\n TableRowColumn,\n} from 'material-ui/Table';\nimport injectTapEventPlugin from 'react-tap-event-plugin';\n// Needed for onTouchTap\n// http://stackoverflow.com/a/34015469/988941\ninjectTapEventPlugin();\nconst MuiTable = () => (\n <Table>\n <TableHeader>\n <TableRow>\n <TableHeaderColumn>ID</TableHeaderColumn>\n <TableHeaderColumn>Name</TableHeaderColumn>\n <TableHeaderColumn>Status</TableHeaderColumn>\n </TableRow>\n </TableHeader>\n <TableBody>\n <TableRow>\n <TableRowColumn>1</TableRowColumn>\n <TableRowColumn>John Smith</TableRowColumn>\n <TableRowColumn>Employed</TableRowColumn>\n </TableRow>\n </TableBody>\n </Table>\n);\nconst App = () => (\n <MuiThemeProvider>\n <MuiTable />\n </MuiThemeProvider>\n);\nReactDOM.render(\n <App />,\n document.getElementById('app')\n);
","avatar":null},{"id":"cjeqgfuoznmxu0167ayt2zkc3","title":"How To Add A Class in ReactJS","slug":"reactjs-add-class","published_at":null,"created_at":"2018-03-14T02:16:44","excerpt":"What's the best way to add a class in ReactJS? With Jquery, we're all familiar with:","image":null,"posts_tags":[],"date":"March 14, 2018","html":"What's the best way to add a class in ReactJS? With Jquery, we're all familiar with:
\n$(\"#foo\").addClass(\"bar\");
\nSo what's the analogue for this in ReactJS?
\nYou can do stuff like:
\n<div className={this.state.toggle ? 'foo' : 'foo bar'}></div>
\nBut this approach is clunky because we want to add a class - not just change the classes from \"foo\" to \"foo bar\". Functionally there's little difference in this simple case but you can imagine this approach would not be ideal when you have elements with a lot of classes.
\nThe push() method adds one or more elements to the end of an array. In the example below, the array is box.
\nThe join() method joins all elements of an array into a string.
\n...\nlet box = [\"foo\"];\nrender() {\n if(this.state.addClass) {\n box.push(\"bar\");\n }\n return(\n <div className={box.join('' )} />\n );\n}\n...
\nIn this example, we made the addition of the new class bar dependent on this.state.addClass. Presumably you'd have some action like an onClick event to trigger a state change.
\n