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

Posted on May 30, 2018

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

TypeError: Cannot read property ‘search’ of undefined

Posted on May 25, 2018 Updated on May 25, 2018

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 May 23, 2018

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}