I have header.htm and footer.htm files and I would like to add these two files into my reactjs app. I tried to create header.htm as a component and render it in my app.js but it display as a string on the top not a page. ie. http://mydomain/include/header.htm. How do I solve this problem?
import React, { Component } from 'react';
class Header extends Component {
createMarkup()
{
return { __html: "https://mydomain/include/header.htm"};
}
render(){
return (
<div dangerouslySetInnerHTML={this.createMarkup()} ></div>
);
}
}
export default Header;
app.js
class App extends Component {
render(){
return (
<Header />
)
}
}
Related
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]
Once I am going to refresh pages rather than main route, browser showing script/code instead of ui. Web app made using reactjs v16. I am looking for solutions. Could you please help me?
page after refresh
import React, { Component } from 'react';
class DashboardContainer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="right_col quick-settings" role="main">
Dashboard
</div>
)
}
}
export default DashboardContainer;
I think you omitted the angle bracket(<>) by mistake when you used Dashborard component. Try this:
import React, { Component } from 'react';
class DashboardContainer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="right_col quick-settings" role="main">
<Dashboard />
</div>
)
}
}
export default DashboardContainer;
I need to download a HTML file in PDF format. I tried some plugins but that doesn't work. I need help.
import React from 'react';
class App extends React.Component {
htmlToPdf()
{
//code need to be written
}
render() {
return (
<div>
<button onClick={this.htmlToPdf}>download</button>
</div>
);
}
}
export default App;
I'm still new to React and after I finished the tutorial I wanted to create something myself.
I've passed the url to make a backgroundImage style and add borders to try it out. Unfortunately I can see the img being set in the css but it won't actually display as expected.
As a test I also tried a simple img with src attribute set to my image and nothing would display.
I made a folder called img inside the src
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
}
function Portfolio(props) {
const stylee = {
backgroundImage:'url('+props.imgURL+')',
borderWidth: 1,
};
const ide = 'portfolio'+props.counting;
return (<div id={ide} style={stylee} className='portfolio'/>)
}
class Home extends Component {
renderPortfolio(count,img){
return <Portfolio counting={count} imgURL={img}/>
}
render(){
return(
<div>
{this.renderPortfolio(1,'./img/1.jpeg')}
{this.renderPortfolio(2,'./img/2.jpeg')}
{this.renderPortfolio(3,'./img/1.jpeg')}
<img src='./img/1.jpeg'/>
</div>
)
}
}
export default App;
What am I doing wrong that is preventing the images from displaying ?
edit-- I've changed my code to the working solution
Instead of passing the local img url, I used require() first then pass the image to props.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
}
function Portfolio(props) {
const counter = 'portfolio'+props.counting;
const loadGambar = props.gmbr;
// const loadGambar2 = require(props.gmbr);
const stylee = {
borderColor:props.color,
border:1,
borderWidth: 10,
backgroundImage: "url("+loadGambar+")",
}
return(
<div id={counter} className='portfolio' style={stylee}>
</div>
)
}
class Home extends Component {
renderPortfolio(count,gambare){
return <Portfolio counting={count} gmbr={gambare}/>
}
render(){
return(
<div>
{this.renderPortfolio(1,require('./img/1.jpg))}
{this.renderPortfolio(2,require('./img/1.jpg'))}
{this.renderPortfolio(3,require('./img/2.jpg'))}
</div>
)
}
}
export default App;
Here's a link to a working example based on your code: sandbox link.
The problem with setting a background image is that it adapts to the dimensions of the div. In your case your div is empty in Portfolio so its dimensions are 0x0 and the image won't show. You will see from the link that I update the style and everything shows. Now the only issue you might have is that you don't have an image loader in your webpack configuration, if you are starting with react I would recommend create-react-app.
my page.js
class R1 extends React.Component {
render() {
return (
<div className="r1">
<h1>level1</h1>
</div>
);
}
}
class R2 extends React.Component {
render() {
return (
<div className="r2">
<h1>level2</h1>
</div>
);
}
}
my main.js
important * as Page from './page';
class App extends React.Component {
render() {
return (
<div className="r1">
<Page.R+level/>
</div>
);
}
}
Skip getInitialState,
I want to dynamic render with level.
I try React.renderComponent(<Page.R+this.state.level />, document.body);
It's not working with failed: SyntaxError
Is there more easily way? or is dynamic render available?
thanks
Not sure how you are exporting your Components so there is an assumption here, generally it is convention to put them in different files.
You can render in your parent component using an if statement inside JSX like this:
class App extends React.Component {
render() {
var renderPage;
if (something) {
renderPage = <PageOne />;
} else {
renderPage = <PageTwo />;
}
return (
<div>
{renderPage}
</div>
);
}
}
main.js can be modified like this to achieve what you want
import * as Page from './page';
class App extends React.Component {
render() {
const level = 2;
return (
<div className="r1">
{/*You use loop over list to get value of level and render all the pages*/}
{React.createElement(Page[`R${level}`], null)}
</div>
);
}
}
Page is an object and we are trying to access the pages and rendering the component name which is in string type.