We Keep Coding

Passing property as pros in react functional component

I am in the process of learning react. Here i got stuck in some basic problems. I learn concept of props and parent-child components in react, but when i try to implement it, it shows error. Please help. I have one parent component named 'Portfolio' and one child component named 'PortfolioBox'. I try to pass title props in PortfolioBox. Here is my sample code. Issue comes while starting the react app 'npm start'. It shows error 'Portfolio is not defined'.
Portfolio Component
import React from 'react';
import PortfolioBox from './PortfolioBox';
import './portfolio.css';
function Portfolio()
{
return (
<div className="row portfolio-container">
<PortfolioBox title="One" />
<PortfolioBox title="Two" />
<PortfolioBox title="Three" />
<PortfolioBox title="four" />
</div>
)
}
export default Portfolio;
Portfolio Box Component
import React from 'react';
function PortfolioBox(props)
{
console.log(props);
return(
<div className="col-md-4 portfolio-box">
<h3>{props.title}</h3>
<p>Description</p>
</div>
)
}
export default PortfolioBox;
App.js File
import React from 'react';
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;

You are missing an import statement in your app.js file:
import React from 'react';
import Portfolio from './Portfolio'; // If your file is in the same directory
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;

Problem with exporting/importing React component

I'm trying to create a React component for a navigation bar.
This component I'd like to import from a separate file into my App.js.
Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.
I have written the following code into a file located at src/components/navbar.js:
import React from 'react';
export default class navBar extends React.Component {
render() {
return (
<p>Hello world.</p>
)
}
}
Now I'd like to import this component from my src/App.js, which looks like this:
import React, { Component } from 'react';
import './App.css';
import navBar from './components/navbar.js'
class App extends Component {
render() {
return (
<navBar/>
);
}
}
export default App;
If I compile and open the site, nothing's there, which confuses me.
I'd be very thankful for any help!
EDIT:
It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.
After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.

In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).
You can read about it here for example.
So in your case you must change the class name navBar to NavBar and then in the render method:
render() {
return (
<NavBar/>
);
}

Here is a full working example:
** Note: NavBar.js shoud start with a Capital letter.
App.js
import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
NavBar.js
import React from "react";
export default class NavBar extends React.Component {
render() {
return (
<div>
<p>Hello world.</p>
</div>
);
}
}

React router v4 cannot display components but no error in console

I am a noob just started learning React a few days ago. I have a problem while I was working with react router v4.
I have a home page component, like this:
import React, {Component} from 'react';
class AboutPage extends Component {
render() {
return (
<div>
<h1>About</h1>
<p>this is the about page</p>
</div>
);
}
}
export default AboutPage;
and here is the App.js:
import React, { Component } from 'react';
import './App.css';
import {
Link, Route, Switch,BrowserRouter
} from 'react-router-dom'
import Header from './components/common/Header';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
class App extends Component {
render() {
const home = () =><h1> Home </h1>
const about = () =><h1> about </h1>
return (
<BrowserRouter>
<div className="container-fluid">
<Header/>
<Switch>
<Route exact path="/" components={home}/>
<Route path="/about" components={about}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
the headers file is just a nav element I want it for all the component.
The problem is if I click either homepage or about page, it doesn't display the content of these components. It just shows the nav element and that's all.
I built this app using creat-react-app. Is there anything wrong in my code? Thx.

Reading the docs looks like that the Route component is expecting the property component and not components. I also believe that what you want to render is your HomePage and AboutPage component

Additional component in <MuiThemeProvider /> results in blank page w/ no error messages

I have recently installed Material UI into my Meteor application using npm install --save material ui
I have gotten the <Header /> component showing up in my app.js file, but whenever I add other components, localhost:3000 simply displays a blank page. Please see my code below:
header.js
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
class Header extends Component {
render() {
return(
<AppBar
title="Header"
titleStyle={{textAlign: "center"}}
showMenuIconButton={false}
/>
);
}
}
export default Header;
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './components/header';
import NewPost from './components/new_post';
const App = () => {
return (
<MuiThemeProvider>
<Header />
</MuiThemeProvider>
);
};
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.render-target'));
});
THE ABOVE CODE WORKS WELL (see screenshot below)
However, if I add another component I get a blank screen
header.js is the same
new_post.js
import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
class NewPost extends Component {
render() {
return (
<TextField
hintText="Full width"
fullWidth={true}
/>
);
}
}
export default NewPost;
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './components/header';
import NewPost from './components/new_post';
const App = () => {
return (
<MuiThemeProvider>
<Header />
<NewPost />
</MuiThemeProvider>
);
};
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.render-target'));
});
The result is simply a blank screen
Why does adding one more component (<NewPost />)inside of <MuiThemeProvider> result in a blank screen? I referred to the material-ui documentation and their sample projects but their application structure is not similar to mine. Any advice? Please let me know if you need more info to make this question clearer.

Wow very strange but I managed to get it working by simply adding a <div>
app.js
const App = () => {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<Header />
<NewPost />
</div>
</MuiThemeProvider>
);
}
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.render-target'));
});
I would really appreciate if anyone could explain why adding a div makes this all work. Thank you!

I would really appreciate if anyone could explain why adding a div
makes this all work
If you look at the browser warning, "Invalid prop children of type array supplied to MuiThemeProvider, expected a single ReactElement.".
So, when you add a <div/> around your components, it wraps them together and turns them into a single react element.

MuiThemeProvider renders as null so you have to wrap children do anything - for example React.Fragment

react - add icons to header inside component

i am currently trying to solve a react problem.
i want to be able to add icons to a container called SalesChannels.
here is the code to the salesChannels page: (JSX)
import React, { Component } from 'react';
import PageContent from 'components/PageContent';
import IBox from 'components/IBox';
export default class SalesChannelsPage extends Component {
constructor(props) {
super(props);
this.state = {
rows: []
}
}
render() {
return (
<PageContent header="Salgskanaler">
<IBox title="Salgskanaler">
</IBox>
</PageContent>
);
}
}
As you can see, i have added a component called IBox. this should be reusable
it looks like this:
import React, {Component} from 'react';
import IBoxTools from './IBoxTools'
export default class IBox extends Component {
render() {
return(
<div className="ibox">
<div className="ibox-title">
{this.props.title}
//this is where the icon should be rendered in the dom
</div>
<div className="ibox-content">
{this.props.children}
</div>
</div>
);
}
}
i have also created another component called IBoxTools - this contains the actual icon / "i" tag:
import React, {Component} from 'react';
export default class IBoxTools extends Component {
render() {
let icon;
if(this.props.icon) {
icon = (
<a title={this.props.title}>
<i onClick={() => this.iconClicked()} className={`pull-right ${this.props.icon}`}></i>
</a>
);
}
return icon;
}
iconClicked() {
console.log('icon clicked')
}
}
So what i am trying to do is add multible icons to the SalesChannels page, inside the IBox tag, without making the IBox component dependent on it.
I hope you can help. Thanks!

You can pass components or arrays of components in props just like children
<IBox
title="Salgskanaler"
icons={[
<IBoxTools key="icon1" icon="foo" />,
<IBoxTools key="icon2" icon="bar" />
]}
>
{/* normal children here */}
</IBox>
Then inside IBox you write { this.props.icons } which will render the icons (or whatever else) if you pass it in.. otherwise will display nothing if the prop is undefined.

You could just use a condition if you don't want to display the icon every time. If I understand what you're attempting to do ...
import React, {Component} from 'react';
import IBoxTools from './IBoxTools'
export default class IBox extends Component {
render() {
return(
<div className="ibox">
<div className="ibox-title">
{this.props.title}
//this is where the icon should be rendered in the dom
{(condition) ? <IBoxTools /> : ""}
</div>
<div className="ibox-content">
{this.props.children}
</div>
</div>
);
}
}
Or if you need to do it multiple times, like you said, then I would use underscore.js or something like it that has a map function.
{_.map(icons, function(icon) {
return (
<IBoxTools />
)
})}
Or some combination of the two.