I m following tutorials to learn the concept of Hocs in React js the result of the tutorial should display in My browser like this :
toolbar,sideDrawer,backdrop
Burger
Build Controls
but it displayed like this :
toolbar,sideDrawer,backdrop
I cleaned cache in both browser and development server but nothing happened...so please any help or guide why this??Thanks in advance
Aux.js
const Aux = (props) => props.children
export default Aux;
Layout.js
import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css'
const Layout = ( props ) => (
<Aux>
<div>toolbar,sideDrawer,backdrop</div>
<main className={classes.Content}>
{props.childern}
</main>
</Aux>
);
export default Layout;
App.js
import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render () {
return (
<div>
<Layout>
<BuliderBurger/>
</Layout>
</div>
);
}
}
export default App;
BurgerBuilder.js
import React,{Component} from 'react';
import Aux from '../../hoc/Aux';
class BurgerBuilder extends Component {
render () {
return (
<Aux>
<div>Burger</div>
<div>Build Controls</div>
</Aux>
);
}
}
export default BurgerBuilder;
The reason is that you misspelt children in Layout, you spellt it childern. Fix the typo and it works...
const Layout = ( props ) => (
<Aux>
<div>toolbar,sideDrawer,backdrop</div>
<main className={classes.Content}>
{props.children}
</main>
</Aux>
);
import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render () {
return (
<div>
<Layout/>
<BuliderBurger/>
</div>
);
}
}
export default App;
Using Layout this can give the desired result
Related
I have a component that I want to show in another site.
components/Hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div><p>Hello</p></div>
)
};
};
Now I want to import it into my site named "Profile.js".
pages/Profile.js
import React from 'react';
import Hello from '../components/Hello';
export default function Profile() {
return(
<div>
{/* Say hello*/}
{Hello}
</div>
);
}
What am I doing wrong? Why wont it say hello on my "Profile.js" page?
React syntax for rendering components is as follow :
export default function Profile() {
return(
<div>
{/* Say hello*/}
<Hello/>
</div>
);
}
I am learning React
While working on Props, I have created a component and using that component in my index.jsx. But the values passed through props are not displayed on the UI.
usingprops.jsx
import React from 'react';
class UsingProps extends React.Component {
render() {
return (
<div>
<p>{this.props.headerProp}</p>
<p>{this.props.contentProp}</p>
</div>
);
}
}
export default UsingProps;
index.jsx
import React from 'react';
import UsingProps from './Props/UsingProps.jsx';
class App extends React.Component {
render() {
return (
<div>
<UsingProps />
</div>
);
}
}
const myElement = <App headerProp="Header from props!!!" contentProp="Content from props!!!" />;
ReactDOM.render(myElement, document.getElementById('root'));
export default App;
You are putting the headerProp on the App component, not the UsingProps component, which is where you are trying to access it. You need to revise it to this:
class App extends React.Component {
render() {
return (
<div>
<UsingProps headerProp="Header from props!!!" contentProp="Content from props!!!" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
One component Landing.js has following code::
import React, { Component } from 'react'
import NewsSearch from '../NewsSearch/NewsSearch';
import NewsLatest from '../NewsLatest/NewsLatest';
import './Landing.css';
import axios from 'axios';
class Landing extends Component {
state={
newsList: []
}
componentDidMount(){
axios.get(`https://api.nytimes.com/svc/topstories/v2/home.json?api-key=7cK9FpOnC3zgoboP2CPGR3FcznEaYCJv`)
.then(res=> {
this.setState({newsList: res.data.results});
});
}
render() {
// console.log(this.state.newsList);
return (
<div className="landing text-center text-white">
<h1>News Portal</h1>
<div className="news-search">
<NewsSearch />
</div>
<div className="news-latest">
<NewsLatest newsList={this.state.newsList}/>
</div>
</div>
)
}
}
export default Landing;
When sending props to NewsLatest component, 2 values are getting passed: first as undefined and then when value comes then an array with the values.
In the "NewsLatest.js" file code is :::
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
newsTitle = (
this.props.newsList.map(item => (<h2>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsTitle}
</div>
);
}
}
export default NewsLatest;
Nothing is rendering on the UI. I dont know how to handle that. Kindly suggest something.
The issue you are facing is that you are not rendering anything (per se) cos newsTitle does not return anything.
In your code, newsTitle is an object but you need to make it a function.
Modifying NewsLatest should fix this though
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
newsTitle = () => (
this.props.newsList.map(item => (<h2>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsTitle()}
</div>
);
}
}
export default NewsLatest;
I'm working in nextjs.I have header component and in order to show header in all other pages ,overrided app.js with _app.js .Header has 2 navigation link usersList and users.
Now I want to send data from header component to another page say usersList and users on click of submit in header.How we can achieve that .
I know that we can use context .I'm using class based component don't know weather we can use context.
Is there any other solution to this problem..
Please help
header.js
class HeaderComponent extends Component {
onSearch(event){
//some code
}
render() {
return (
<div className="navbar">
<Input id="search-input" className="text-box" placeholder="Enter name or Email.." onKeyDown={($event)=>this.onSearch($event)} prefix={<Icon type="search" onClick={()=>this.onSearch} ></Icon>}></Input>
</div>
)
}
}
export default HeaderComponent
Layout.js
import React, { Component } from 'react';
import Header from './Header';
class Layout extends Component {
render () {
const { children } = this.props
return (
<div className='layout'>
<Header />
{children}
</div>
);
}
}
_app.js
import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}
userList.js
class AppUser extends Component {
render() {
return (
<Table
rowKey={data._id}
columns={this.columns1}
onExpand={this.onExpand}
dataSource={data}
/>
)
}
}
EDIT :
can we achieve it through props
You can use ReactRedux to create a store and have it accessible from all components.
https://redux.js.org/api/store [1]
I'm trying to render a graphviz graph from a dotfile in my React Component. I keep running into errors I don't understand. If anyone could shed some light I would be grateful.
import React from 'react';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';
class Visualization extends React.Component {
setGraph() {
console.log('DOT source =', dotSrc);
const dotSrcLines = dotSrc.split('\n');
d3.select(".graph").graphviz().renderDot(dotSrc);
}
render(){
return (
<div className="graph">
{this.setGraph}
</div>
)
}
}
export default Visualization;
I've also tried:
import React, { Component } from 'react';
import { render } from 'react-dom';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import HTMLReactParser from 'react-html-parser';
const graph = Viz({ files: [ { path: dotSrc } ] });
class Visualization extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<div>
{HTMLReactParser(graph)}
</div>
</div>
);
}
}
render(<Visualization />, document.getElementById('root'));
To no avail. Neither Viz nor GraphViz wants to read my dotfile though I'm not sure I'm using the correct syntax either.
Thank you in advance.
It's not exactly clear what you want to do and what errors you are getting.
This code at least generates a graph from a static string when the button is clicked:
import React, { Component } from 'react';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';
var dotSrc = 'digraph {a -> b}';
class App extends Component {
setGraph() {
console.log('DOT source =', dotSrc);
d3.select(".graph").graphviz().renderDot(dotSrc);
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to magjac's React hack</h1>
</header>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="javascript/worker"></script>
<div className="graph">
</div>
<button className="square" onClick={() => this.setGraph()}>
{'Click me'}
</button>
</div>
);
}
}
export default App;