I created one component and I'm exporting it
import React , {Component} from 'react'
import logo from './logo.svg';
class Item extends Component {
render () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">ReactND - Coding Practice</h1>
</header>
<h2>Shopping List</h2>
<form onSubmit={this.addItem}>
<input
type="text"
placeholder="Enter New Item"
value={this.state.value}
onChange={this.handleChange}
/>
<button disabled={this.inputIsEmpty()}>Add</button>
</form>
<button onClick={this.deleteLastItem} disabled={this.noItemsFound()}>
Delete Last Item
</button>
</div>
)
}
}
export default Item
And I want to use this component in my app component as below
import React from 'react';
import './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
But I got this error in App.js
Line 9: 'Item' is not defined react/jsx-no-undef
pretty sure I did everything. I have exported and imported this component , so what I'm missing here?
You have to name your import.
import React from 'react';
import Item from './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
Related
In my main container the layout has this code
import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';
class Layout extends Component {
state = {
showSideBar: true
}
sideBarToggleHandler = () => {
console.log("test");
}
render() {
return (
<div>
<Header />
<div>
<SideBar onClick={this.sideBarToggleHandler}/>
<main id="main">
{this.props.children}
</main>
</div>
</div>
)
}
}
export default Layout;
Whenever I click on any element in the side bar I want to console log test
For some reason this is not happening however if I move the onClick method to the header for example or to main it works fine
This is my sidebar:
import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {
}
return (
<div className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
};
export default sideBar;
and this is my navigation items:
import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faHome } from '#fortawesome/free-solid-svg-icons';
import { faFileAlt } from '#fortawesome/free-solid-svg-icons';
import { faChartLine } from '#fortawesome/free-solid-svg-icons';
library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);
const navigationItems = (props) => {
return (
<Aux>
<p>CONSUMER</p>
<ul className={classes.NavigationItems}>
<li><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</li>
<li><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</li>
<li><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</li>
</ul>
<div className={classes.Divider}></div>
<div className={classes.ButtonPosition}>
<button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
</div>
<div className={classes.Divider + ' ' + classes.DividerBottom}></div>
<p className={classes.footer}>Micheal Alfa v 1.0.0</p>
<p className={classes.footer}>Copyrights # 2019 All Rights Reserved</p>
</Aux>
);
};
export default navigationItems;
Any ideas?
Thank you
You are not doing anything with the passed onClick event. You need to put it on something, like so:
const sideBar = (props) => (
<div onClick={this.props.onClick} className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
export default sideBar;
This will fire that event when you click on the div. Make sense?
I have this simple code below and I got this error when building, but its not clear for me what the order of my imports should be.
import * as React from 'react';
import './App.css';
import logo from './logo.svg';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
class App extends React.Component {
public render() {
return (
<div className="App">
<DefaultButton
text='See Button'
primary={ true }
href='#/components/button'
/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Set these in your tslint.json:
"rules": {
"ordered-imports": [false],
"object-literal-sort-keys": [false]
}
I created a Reactjs app by create-react-app.
... but the components are not shown in the page, I think it is probably because App.js is not rendering the components?
Here is my code:
App.js
import React, { Component } from 'react';
import './App.css';
import login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<login/>
</div>
);
}
}
export default App;
/containers/login/login.js
import React, { Component } from 'react';
import "./login.css";
class login extends Component {
render() {
return (
<div className="headings">
<form action="">
Username <br/>
<input type="text" name="userrname" />
<br/>
Password <br/>
<input type="password" name="password" />
<br/>
<input type="submit" value="Login" />
</form>
</div>
);
}
}
export default login;
The component in the browser is like this:
<login></login>
Your own component need to start with a capital letter, or Babel will treat them as strings.
Rename the variable to Login and it will work.
import Login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<Login />
</div>
);
}
}
I have a very simple react app.
In the main App.js I have a Routerwith my routes.
In another separate component, PostItem, which lives in MainComponent, I have a Link button to another component, JobPost.
I keep getting:
Cannot GET /job/7
Does this set up work? Or do I need to have a Router element in my component with my Link?
App.js:
import React from 'react';
import { render } from 'react-dom';
import MainComponent from './index.js';
import JobPost from './components/JobPost.js';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const App = () => (
<Router>
<div>
<Route path="/" exact component={MainComponent} />
<Route path="/job/:id" exact component={JobPost} />
</div>
</Router>
);
render(<App />, document.getElementById('root'));
PostItem.js:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default function PostItem(props){
return(
<div className="post-item">
<div className="job-details">
<h2 className="job-title" dangerouslySetInnerHTML={{__html: props.title }} />
<h3 className="job-location"> Test Company - <i>Test Location</i></h3>
<div className="job-description">
<span dangerouslySetInnerHTML={{__html: props.content }} />
</div>
</div>
<button className="view-btn">
<Link to={ `/job/` + props.id } >
View
</Link>
</button>
</div>
);
}
JobPost.js:
import React, { Component } from 'react';
//make actual class and render again
export default class JobPost extends Component{
constructor(props){
super(props);
this.state={
id: this.props.match.params.id
};
}
componentDidMount(){
//fetch id from component
console.log(this.state.id);
}
render(){
return(
<div className="post-container">
<div className="job-details">
<h2 className="job-title" dangerouslySetInnerHTML={{__html: props.title }} />
<h3 className="job-location"> Test Company - <i>Test Location</i></h3>
<div className="job-description">
<span dangerouslySetInnerHTML={{__html: props.content }} />
</div>
</div>
<button className="apply-btn">Apply</button>
</div>
);
}
}
I'm using Filter Input from blueprintjs in a reactjs project, but the style doesn't load correctly, here's my code:
Assigning.jsx
import './Assigning.scss';
export default class Assigning extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
Assigning.scss
#import '~#blueprintjs/core/lib/css/blueprint.css';
#import '~#blueprintjs/icons/lib/css/blueprint-icons.css';
is ~ character required at the beginning of import ?
It works with me with the following imports
import "#blueprintjs/table/lib/css/table.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
The full code for the component is
import React, { Component } from 'react';
class TestComponent extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
export default TestComponent;
I got the following output