I have a component that has an image attribute with the component.
What is the best way to test the image attribute?
Test:
test("Menu has a background image called bg.png", () => {
const menu = shallow(
<Menu />
);
expect(menu.find('.menu-bg').prop('style')).toHaveProperty('background', "url('images/bg1.png')");
});
Menu Component:
export default class Menu extends React.Component {
render() {
return <div className="menu-bg" />;
}
}
Style:
.menu-bg{
background: url('images/bg1.png');
}
I'm getting the current error:
Matcher error: received value must not be null nor undefined
Received has value: undefined
Related
I would like to make a draggable split panel for an editor. Its behavior is mainly like Console panel of CodeSandbox:
When we click on Console, the panel is expanded, and the arrow becomes ArrowDown for closing.
The border of the panel is dragabble.
When we click on Console on an expanded panel, the panel is closed, and the arrow becomes ArrowUp for expanding.
I have the following code (https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927) by https://github.com/johnwalley/allotment. The problem is that the prop preferredSize does not change following this.state.toExpand.
Does anyone know why this does not work?
import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
toExpand: true
};
}
render() {
return (
<div>
<div className={styles.container}>
<Allotment vertical>
<Allotment.Pane>Main Area</Allotment.Pane>
<Allotment.Pane preferredSize={this.state.toExpand ? "0%" : "50%"}>
<div
onClick={() => {
this.setState({ toExpand: !this.state.toExpand });
}}
>
Console
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
</Allotment.Pane>
</Allotment>
</div>
</div>
);
}
}
The problem is that the prop preferredSize does not change following this.state.toExpand.
This is not the problem, it does change, however, the documentation states:
Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the reset method is called on the Allotment instance.
It is not configured to update when the prop is changed, however, if you double click on the border after setting it to ArrowDown, it will reset to 50%.
Instead, if you add a reference to the Allotment element by first initializing a reference in the constructor:
constructor(props) {
super(props);
this.allotment = React.createRef();
this.state = {
toExpand: true
};
}
And assigning it as a prop:
<Allotment vertical ref={this.allotment}>
Then you can add a callback to the setState for when you change the expand option that calls the reset function:
resetAllotment() {
if (this.allotment.current) {
this.allotment.current.reset();
}
}
// ...
this.setState({ toExpand: !this.state.toExpand }, () => this.resetAllotment());
Side-note, it appears that the Allotment component does not have time to process the new prop change, before reset is called in the setState callback... which is illogical to me, however, you can work around this by a hacky setTimeout of 0ms:
resetAllotment() {
setTimeout(() => this.allotment.current && this.allotment.current.reset(), 0);
}
the problem is that I wanted a toggle menu and I created a hamburger apply css on it and set up the methods but its not working, there is no errors given
import React, { Component } from 'react'
import './toggle.css';
export default class toggle extends Component {
constructor(props){`enter code here`
super(props);
this.state={
switch:false
}
}
handleSwitch=()=>{
this.setState={
switch:!this.state.switch
}
}
render() {
let className='toggle-switch';
if(this.state.switch){
className='toggle-switch changes';
}
return (
<div className={className} onClick={this.handleSwitch}>
<span className="bars1"></span>
<span className="bars2"></span>
<span className="bars3"></span>
</div>
)
}
}
setState is a function. Your handler should be
handleSwitch = () => this.setState({
switch: !this.state.switch
})
Or better yet, when referencing the past state value its best to use a function
handleSwitch = () => this.setState( prevState => ({
switch: !prevState.switch
}))
You need to use setState as function and I recommend to practice binding handleSwitch in constructor to access states for clearly understanding how it works:
constructor(props){
super(props);
this.state={
switch: false
}
this.handleSwitch = this.handeSwitch.bind(this);
}
handleSwitch() {
this.setState({
switch: !this.state.switch
});
}
I'm starting to implement the smart/dumb component pattern where the "dumb" component knows nothing about it's environment and receives all of it's data through props. What do you do when the dumb component has to submit or change data? How can it communicate with the outside world and still be "dumb"?
Here's my basic example I'm using to figure this pattern out. If I were to add and onClick event to the MyTask component that updated a counter in the DB, what would handle that event?
// components/MyList.jsx
import React from 'react';
export default class MyList extends React.Component {
render() {
return(
<div>
<h3>{this.props.listName}</h3>
<ul>
{this.props.tasks.map((task) => (
<MyTask key={task.id} task={task} />
))}
</ul>
</div>
);
}
}
MyList.propTypes = {
listName: React.PropTypes.string.isRequired,
tasks: React.PropTypes.array.isRequired,
}
export class MyTask extends React.Component {
render() {
return (
<li>{this.props.task.text}</li>
);
}
}
MyTask.propTypes = {
task: React.PropTypes.object.isRequired,
}
and the app:
// app.jsx
import React from 'react';
import MyList from './components/MyList.jsx'
export class TaskApp extends React.Component {
getList() {
return('Today Stuff');
}
getTasks() {
return([
{id: 1, text: 'foo'},
{id: 2, text: 'diggity'},
{id: 3, text: 'boo'},
{id: 4, text: 'bop'}
]);
}
render() {
return (
<MyList listName={this.getList()} tasks={this.getTasks()} />
);
}
}
Generally speaking you can handle this by passing function references from your 'smart' components down to your 'dumb' components. The dumb component then isn't responsible for implementing any of the logic associated with the function, just telling the smart component 'I've been clicked'.
In this case inside of your TaskApp class in app.jsx you could have your click handler:
//app.jsx
...
handleClick() {
// Update the DB counter by 1
}
...
render () {}
Then pass handleClick through your components as a prop:
<MyList listName={this.getList()} tasks={this.getTasks()} handleClick={this.handleClick} />
<MyTask key={task.id} task={task} handleClick={this.props.handleClick} />
And execute it in the MyTask component when a list element is clicked:
<li onClick={this.props.handleClick}>{this.props.task.text}</li>
Keep in mind that if the handleClick() function is making use of 'this' at all, you'll need to .bind(this) on your function reference when you pass it down (or bind it in the constructor / use ES6 fat arrow functions).
EDIT: For examples of the other ways to bind 'this', you could in the constructor of your class assign the bound function to your this.handleClick reference, so:
export default class TaskApp extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
...
...
}
Which allows you to use this.handleClick the way you would normally expect.
Or you could use ES6 fat arrow functions, which preserve the context of 'this' when they are called:
<MyList
listName={this.getList()}
tasks={this.getTasks()}
handleClick={() => this.handleClick} />
Assuming that TaskApp is the smart component and MyList is the dumb component, it should be something like
Smart Component
// app.jsx
import React from 'react';
import MyList from './components/MyList.jsx'
export class TaskApp extends React.Component {
getList() {
return('Today Stuff');
}
getTasks() {
return([
{id: 1, text: 'foo'},
{id: 2, text: 'diggity'},
{id: 3, text: 'boo'},
{id: 4, text: 'bop'}
]);
}
handleClick(task){
// update the db here
}
render() {
return (
<MyList listName={this.getList()} tasks={this.getTasks()}
onClick={this.handleClick}/>
);
}
}
Dumb Component
// components/MyList.jsx
import React from 'react';
export default class MyList extends React.Component {
render() {
return(
<div>
<h3>{this.props.listName}</h3>
<ul>
{this.props.tasks.map((task) => (
<MyTask onClick={() => this.props.onClick(task)}
key={task.id} task={task} />
))}
</ul>
</div>
);
}
}
MyList.propTypes = {
listName: React.PropTypes.string.isRequired,
tasks: React.PropTypes.array.isRequired,
}
export class MyTask extends React.Component {
render() {
return (
<li onClick={this.props.onClick}>{this.props.task.text}</li>
);
}
}
MyTask.propTypes = {
task: React.PropTypes.object.isRequired,
}
You can pass the event handler callback as a prop to MyTask:
<MyTask onClick={this.handleTaskClick.bind(this)} ... />
And then use it in MyTask:
<li onClick={this.props.onClick}>...</li>
See: https://facebook.github.io/react/docs/tutorial.html#callbacks-as-props
At which point in a React components life cycle can I get the components css properties which are set in a css file?
I've tried it in the render method and the componentDidMount method and neither assigned the css properties to the component.
export default class HomeArtist extends React.Component {
constructor(props){
super(props);
}
componentDidMount(){
let ImageStore = document.getElementsByClassName('home-artist-display');
console.log("ComponentDidMount: ", ImageStore);
}
render(){
var ImageStyle = {
backgroundImage: "url("+this.props.info.image+")"
};
return (
<div className="home-artist-display" style={ImageStyle}>
<Link to={"artist/" + this.props.info.id}>
<h3 className="home-artist-name">{this.props.info.name}</h3>
</Link>
</div>
)
}
}
I wrote a React library that exposes a size object (with width and height props) to components.
For your use case you could use it like so:
import SizeMe from 'react-sizeme'; // import me!
class HomeArtist extends React.Component {
...
render(){
// Size gets passed in as props!
const { width, height } = this.props.size;
var ImageStyle = {
backgroundImage: "url("+this.props.info.image+")"
};
return (
<div className="home-artist-display" style={ImageStyle}>
<Link to={"artist/" + this.props.info.id}>
<h3 className="home-artist-name">{this.props.info.name}</h3>
</Link>
</div>
)
}
}
// wrap your component export!
export default SizeMe()(HomeArtist);
--
You can find out full details at https://github.com/ctrlplusb/react-sizeme
I am getting an unexpected token error in React when I try to specify a constant, and I cannot seem to figure out why.
My code is pretty simple, and I have followed the react-bootstrap examples here almost exactly.
My code is as follows:
import { Component, PropTypes } from 'react';
var rbs = require('react-bootstrap'),
Panel = rbs.Panel;
export default class ResumeSection extends Component {
constructor(...args) {
super(...args);
this.state = {
open: true
};
}
const title = (
<h3>Panel title</h3>
);
render() {
return (
<Panel collapsible expanded={this.state.open}>
<p>Body</p>
</Panel>
);
}
}
The error occurs on title directly after const and just says SyntaxError: Unexpected Token
You can't define a const in the class body like that; it should be moved into a method.
render() {
const title = (
<h3>Panel title</h3>
);
// ...
}
Apparently, this is called "Public Class Field Syntax" and is already available in babel as the plugin, babel-plugin-transform-class-properties. I have not tried it as yet though.
Additional reference is reactjs.org events guide