I have an imported image file and I want to pass it into an object that is called in my app return:
import React, { Component} from 'react';
import Gallery from '../Gallery';
import About from '../imgs/work-one/about.jpg';
const IMAGES = [
{
src: WorkOne.About
}
]
class WorkOne extends Component {
render() {
return (
<section>
<Gallery images={IMAGES} />
</section>
)
}
}
export default WorkOne
import React, { Component} from 'react';
import Gallery from '../Gallery';
import About from '../imgs/work-one/about.jpg';
const IMAGES = [
{
src: About
}
]
class WorkOne extends Component {
render() {
return (
<section>
<Gallery images={IMAGES} />
</section>
)
}
}
export default WorkOne
Related
I want use consloe to call function like js, but consloe display "Uncaught ReferenceError: isDebug is not defined at :1:1".
SalesKpi.tsx
import * as React from 'react';
import styles from './SalesKpi.module.scss';
import './SalesKpi.css';
import { ISalesKpiProps } from './ISalesKpiProps';
import { escape } from '#microsoft/sp-lodash-subset';
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
export default class SalesKpi extends React.Component<ISalesKpiProps, {show: boolean;}> {
public constructor(props) {
super(props);
this.state = {
show: false
}
}
public debug(){
this.setState({show: true})
}
public render(): React.ReactElement<ISalesKpiProps> {
return (
<div className="row">
{this.state.show &&
<div className="col">
.................
</div>
}
</div>
)
}
i have an app component where map over my data an return a component, I want to make app the homepage that displays the component i return
import React, { Component } from "react";
import data from "./data";
import Asteriods from "./components/Asteroids";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import "./App.css";
class App extends Component {
state = {
// calculations: [],
asteroids: data,
};
render() {
return (
<div className="space">
<Header />
{this.state.asteroids.map((item) => (
<Asteriods key={item.id} item={item} />
))}
</div>
);
}
}
export default App;
I also have a component that where i want to link to that other component and still pass props to the stock component
import React, { Component } from "react";
import Stock from "./Stock";
class AsteroidDetails extends Component {
render() {
return (
<div className="popup">
<div className="popup\_inner">
<button onClick={this.props.closePopup}>X</button>
<p> - Name: {this.props.asteroid.name}</p>
<p> - Type: {this.props.asteroid.type}</p>
<p> - Mass: {this.props.asteroid.mass}</p>
Link to vieuw stock
<Stock
// chemPerDay={this.props.chemPerDay}
{...this.props}
// remainingMassPerday={this.props.remainingMassPerday}
// asteroidYieldPerDay={this.props.asteroidYieldPerDay}
// remainingMpct={this.props.remainingMpct}
/>
</div>
</div>
);
}
}
export default AsteroidDetails;
how can i use react router in both of these cases ?
I am trying to learn React Context and got stuck. Need help.
App.js
import React from 'react';
import Header from './components/Header';
export const MyContext = React.createContext("Default");
class App extends React.Component {
render() {
return (
<MyContext.Provider value="dark">
<Header />
</MyContext.Provider>
);
}
}
export default App;
Header/index.js
import React, { Component } from 'react'
import { MyContext } from "./../../App";
class Header extends Component {
//static contextType = MyContext;
render() {
return (
<div>
{this.context}
</div>
)
}
}
Header.contextType = MyContext;
export default Header;
Got an error MyContext is not defined.
It works when i move Header class to App.js
What am i doing wrong? Tnx for your help
There are two ways to use context either use:
1. By using context consumer :
<MyContext.Consumer>
{
contextValue => {
return <div>
{value}
</div>
}
}
<MyContext.Consumer>
2. By assigning context to a object:
static contextType = MyContext;
render(){
const {value1,value2.......} = this.context
}
For more information about Context visit the React official page.
https://reactjs.org/docs/context.html
The provider only holds the the value for you(a bit like a store). It is the consumer that makes it available to your components.
Headerjs should look like this
// Header.js
import React, { Component } from 'react'
import { MyContext } from "./../../App";
class Header extends Component {
//static contextType = MyContext;
render() {
return (
<MyContext.Consumer>
{ value => {
return <div>
{value}
</div>
}}
<MyContext.Consumer>
)
}
}
// Header.contextType = MyContext; not needed for react v16+
export default Header;
To get more power out of Context i will suggest combining with Higher Order Components. for example if what you want is a theming system
you can do this.
import React from "react";
const themes = {
dark: {
background: "#333"
},
light: {
background: "#f5f5f9"
}
};
const { Provider, Consumer } = React.createContext(themes);
export const ThemeProvider = ({ children }) => {
return <Provider value={themes}>{children}</Provider>
};
export const withTheme = theme => {
return Component => props => <Consumer>
{themes => {
return <Component {...props} style={{ ...themes[theme]}} />;
}}
</Consumer>
};
in app.js
import Header from "./Header";
import { ThemeProvider } from './Theme'
class App extends React.Component {
render() {
return (
<ThemeProvider>
<Header />
</ThemeProvider>
);
}
}
and lastly Header.js
import React, { Component } from "react";
import { withTheme } from "./Theme";
class Header extends Component {
//static contextType = MyContext;
render() {
return <h1 style={{ ...this.props.style }}>Header</h1>;
}
}
export default withTheme("dark")(Header);
You can read MY article on using context for auth for more
I have a FileDrop component, then I use enzyme to test it doesn't render the component correctly and the output is
<Route render={[Function: render]} />
Following is my component:
import React from "react";
import Dropzone from "react-dropzone";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { dropFiles} from "../../actions/fileActions";
class FileDrop extends React.Component {
constructor(props) {
super(props);
this.onDrop = this.onDrop.bind(this);
}
onDrop(accepted, rejected) {
this.props.dispatch(dropFiles(accepted));
}
getInnerContent(filename) {
return (
<span className="filename-text">
<i className="fa fa-3x fa-files-o" /> {filename ? filename : "Click or drag and drop a CSV file here to upload."}
</span>
);
}
render() {
return (
<Dropzone multiple={false} onDrop={this.onDrop} className="drop" activeClassName="active-drop" rejectClassName="reject-drop" accept=".csv">
<div className="drop-inner">{this.getInnerContent(this.props.droppedFiles.length != 0 ? this.props.droppedFiles[0].name : null)}</div>
</Dropzone>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
droppedFiles: state.files.droppedFiles
};
};
export default withRouter(connect(mapStateToProps)(FileDrop));
And following is my FileDropSpec.js
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import FileDrop from '../../../public/scripts/components/fileupload/FileDrop';
describe('<FileDrop/>', function() {
it('should have an input to upload files', function () {
const wrapper = shallow(<FileDrop/>);
console.log(wrapper.debug());
expect(wrapper.find('input')).to.have.length(1);
});
})
This is correct, shallow renders only first lvl of your component tree. And in your case this is withRouter Hoc, for you component test use mount or export file drop component directly.
export class FileDrop extends React.Component {
and use it instead of default export for test with shallow.
http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html
I am trying to use a component that is already created, but I cant figure out what the problem is:
activetenant
import React, { Component } from 'react';
import authAction from '../../redux/auth/actions';
class ActiveTenant extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default ActiveTenant;
and the component where I am trying to use it
import React, { Component } from "react";
import { connect } from "react-redux";
import { Layout } from "antd";
import appActions from "../../redux/app/actions";
import TopbarUser from "./topbarUser";
import TopbarWrapper from "./topbar.style";
import themes from "../../settings/themes";
import { themeConfig } from "../../settings";
import { ActiveTenant } from "./activetenant";
const { Header } = Layout;
const { toggleCollapsed } = appActions;
const customizedTheme = themes[themeConfig.theme];
class Topbar extends Component {
render() {
const { toggleCollapsed } = this.props;
const collapsed = this.props.collapsed && !this.props.openDrawer;
const styling = {
background: customizedTheme.backgroundColor,
position: "fixed",
width: "100%",
height: 70
};
return (
<TopbarWrapper>
<Header
style={styling}
className={
collapsed ? "isomorphicTopbar collapsed" : "isomorphicTopbar"
}
>
<div className="isoLeft">
<button
className={
collapsed ? "triggerBtn menuCollapsed" : "triggerBtn menuOpen"
}
style={{ color: customizedTheme.textColor }}
onClick={toggleCollapsed}
/>
</div>
<ul className="isoRight">
<li>
<ActiveTenant />
</li>
<li
onClick={() => this.setState({ selectedItem: "user" })}
className="isoUser"
>
<TopbarUser />
</li>
</ul>
</Header>
</TopbarWrapper>
);
}
}
export default connect(
state => ({
...state.App.toJS()
}),
{ toggleCollapsed }
)(Topbar);
And the error
./src/containers/Topbar/Topbar.js 105:34-46 './activetenant' does not
contain an export named 'ActiveTenant'.
You are use export default ActiveTenant In this case code should be like this
import ActiveTenant from "./activetenant";
If you want to export mulitple value then use {} to import
for example
//test.js
var a = "cool";
var b = "dool";
export a;
export b;
import {a,b} from './test.js'