Month: May 2018

Fix to : Links must not point to “#”. Use a more descriptive href or use a button instead jsx-a11y/href-no-hash

Posted on

Getting warning:

Links must not point to “#”. Use a more descriptive href or use a button instead jsx-a11y/href-no-hash

While its only a warning in the browser window, I still wanted to see if there was a way to fix it.

BEFORE:

<a href=”#” onClick={this.handleClick} >Link to something</a>

FIX

<a tabIndex=”0″onClick={this.handleClick}>Link to something</a>

Using # , while a HTML staple, is considered broken in React.

Found thanks to afercia at this comment

event.target vs event.currentTarget

Posted on

 A good explanation of target vs currentTarget

  • target is whatever you actually clicked on. It can vary, as this can be within an element that the event was bound to.
  • currentTarget is the element you actually bound the event to. This will never change.

If you are clicking a component and the onClick is on the parent but are getting back the child,  try currentTarget

explanation from here

TypeError: Cannot read property ‘search’ of undefined

Posted on Updated on

In a react componenet, I was having a problem calling a function from another function. I kept getting the error


TypeError: Cannot read property 'search' of undefined

by binding “this” to the first function, it was then able to call the second function.

This example by Rafi Ud Daula Refat on Stackoverflow helped me figure this out.

Here is a little example using some code I made for my project

import React, { Component } from 'react';
class Header extends Component {
search() {
console.log("Enter Button Pressed");
}
handleKeyPress(target) {
if(target.charCode==13){
this.search();
}
}
render(){
return(
 input  onKeyPress={this.handleKeyPress.bind(this)} placeholder="Enter search term" 
)
}

*note input not in <> because wordpress doesnt render it correct, keeps making actual inputs or removes the text

Print something x number of times in JSX / ReactJS

Posted on

If you are using ReactJS you might be asking how to print something x number of times.

plain characters there are many ways to do this such as


let stars = "*".repeat(this.props.review.rating) //where rating is 5

this doesn’t work in when you start using elements as the subject of repetition

for the code:

let newstars = .repeat(this.props.review.rating)

this is the error

TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(…).repeat is not a function

The fix is to add items the following way:


let newstars = []
for(let i=0;i<this.props.review.rating;i++){
stars.push()
}

//now display the JSX as such in your return
{newstars}

Radioboxes in ReactJs, use state for a controlled experience

Posted on

Control your radioboxes with state, to automatically select/unselect a radiobox.

Example, in a rating system, If I were giving a review 3 stars and change my mind to 5 stars, the 4th star should be sleected authomatically. This is just a design choice.

Here is the code below:

</pre>
import React, { Component } from 'react';

class AddReview extends Component {
 state={
 rating1: false,
 rating2: false,
 rating3: false,
 rating4: false,
 rating5: false
 }

handleRating = (event)=&gt;{
 switch (event.target.name) {
 case "rating5":
 this.setState({rating1: true, rating2: true, rating3: true, rating4: true, rating5: true})
 break;
 case "rating4":
 this.setState({rating1: true, rating2: true, rating3: true, rating4: true, rating5: false})
 break;
 case "rating3":
 this.setState({rating1: true, rating2: true, rating3: true, rating4: false, rating5: false})
 break;
 case "rating2":
 this.setState({rating1: true, rating2: true, rating3: false, rating4: false, rating5: false})
 break;
 case "rating1":
 this.setState({rating1: true, rating2: false, rating3: false, rating4: false, rating5: false})
 break;
 default:

}
 }

render(){
return(
<div>
example input below: just make the rest. doesnt render correctly in wordpress but should give you an idea where to get started if you needed direction

input type="radio" id="star2" name="rating2" value={this.state.rating2} checked={this.state.rating2} onClick={this.handleRating}</div>
)
}

}
<pre>

Bypass authentication for signup page in Rails API

Posted on Updated on

I added authentication on my rails api.

Works great, only authenticated users can now call on the api.

Now my problem was that I am unable to signup, since it requires authentication. Catch-22.

how to bypass?

Authentication is being inherited from application_controller.rb

for the signup controller, I just inherited directly from ActionController::API

 

 

This was helpful if you need to setup the api and you need assistance.

How do you paste source code into wordpress?

Posted on Updated on

For sometime, I was posting source code as plain text, I knew there was a better way.

just wrap your code as such between code language tags as such:

Screen Shot 2018-05-22 at 9.40.01 AM

Supported formats are :

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • diff
  • erlang
  • fsharp
  • go
  • groovy
  • html
  • java
  • javafx
  • javascript
  • latex (you can also render LaTeX)
  • matlab (keywords only)
  • objc
  • perl
  • php
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • text
  • vb
  • xml

Looks like wordpress has a nice support page up about it

Rails: stop ActiveRecord::RecordNotFound from breaking app

Posted on Updated on

Was building a rails api backend, but when I would search for a record that was not found, the app would show the error. That is great for testing, but I wanted to handle the error without a 404 since this is an api and wanted to send a specific json message.

Found the solution as such:

class YourController < ActionController::Base

  rescue_from ActiveRecord::RecordNotFound, with: :dude_wheres_my_record

  def show
    # your original code without the begin and rescue
  end

  def dude_where_my_record
    # special handling here
  end
end

Found on stack overflow thanks to noodl

 

 

Drop a database from postgres

Posted on Updated on

in bash

type psql

\list or \l to list your database

terminate any connections by using the following command. example if databse named YourDatabase

select pg_terminate_backend(pid) from pg_stat_activity where datname=’YourDatabase’;

*use procid instead of pid for older versions of postgres

DROP DATABASE “YourDatabase”;

Now your database is gone.

https://stackoverflow.com/questions/7073773/drop-postgresql-database-through-command-line for reference

Cannot push commit to github :

Posted on

Error:

hint: Updates were rejected because the remote contains work that you do

hint: not have locally. This is usually caused by another repository pushing

hint: to the same ref. You may want to first integrate the remote changes

hint: (e.g., ‘git pull …’) before pushing again.

hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

hint: Updates were rejected because the remote contains work that you do

FIX

git push -f origin master

Notes:
forcing an update isn’t ideal but all the commits were on my local machine and I am the only one with access to the repository. Possible the error occurred due to network issue earlier?  Else I would git pull, and then go through the diffs