ReactJS

React – onClick captures children as target rather than parent

Posted on

I placed  some data in the parent div that I wanted to use when the div was clicked.

Using event.target was not working because I was getting the children elements as the target and not the parent div as I wanted.


div  onClick={this.handleClick} name={item.name}  //want this as event target h2 
Welcome h2
h3 {item.name} h3
h4 Item found in: {Item.location} h4
/div

 

The fix was below:


handleClick = (event)=>{
event.preventDefault();
console.log(event.currentTarget);
const target = event.target

 

Advertisements

Uncaught TypeError: Super expression must either be null or a function, not undefined in React app

Posted on Updated on

Running a react app, nothing is showing up.

This is the error I am getting in console:

Uncaught TypeError: Super expression must either be null or a function, not undefined

From bundle.js:22486

In console, I  expand and click on the link to  bundle.js:22486

I get back this line, but the important part is at the end:

    function _inherits(subClass, superClass) { if (typeof superClass !== “function” && superClass !== null) { throw new TypeError(“Super expression must either be null or a function, not ” + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // import React, {Componenet} from ‘react’

Can you see what was wrong?

I spelled Component wrong. But the error doesn’t directly say that, you need to dig a little.

One I fixed the error, I was able to see my app

React: TypeError: Cannot read property ‘request’ of undefined

Posted on

I was getting the error : TypeError: Cannot read property ‘request’ of undefined  while I was building a react lab.

 

I noticed it said something about components not installed. I had ran npm install before but that wasn’t the fix.

 

yarn install is what fixed it, looks like some packages depended on yarn rather than npm.

 

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

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}