ReactJS
React inline styles – merge two style objects
I had two style objects that I needed to merge for a component. One was the style objects that makes the component look good, the other was to set the display visible or not.
I could get around it by wrapping the component in another div that would get the display style, but here is how to minimize your divs
const style1 = {color: ‘blue’}
const style2 = {display: ‘none’} //used with state that toggles visibility
<div style={Object.assign(style2, style1)} > </div>
The reason the display style should be first is because the key pairs from the second object are copied to the first. so style2 would now be
{display: ‘none’, color: ‘blue’}
axios – on POST errors JSON response from api server not being printed
When you POST from curl, you are getting the JSON response from the server that you setup.
On your frontend when trying to print the error to the console it’s not coming up. Instead you get the following:
xhr.js:166 POST MYURLHERE 400 (Bad Request)
Even if you print the whole error or JSON stringify the error you aren’t seeing the response
ANSWER
make sure you are printing error.response.data
React – onClick captures children as target rather than parent
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
Uncaught TypeError: Super expression must either be null or a function, not undefined in React app
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
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
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.
TypeError: Cannot read property ‘search’ of undefined
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
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}
