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

Advertisements

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