I try to download a file pdf.
import React, {Component} from 'react';
import cv from "../media/Test.pdf";
export default class Downloader extends Component {
render() {
return (
<div className="pdf">
Download
</div>
);
}
}
why the target="_blank" doesn't work?
Related
The code down below shows my work in react, where i freshly startet my project and i am still pretty new in this kind of area. I have one simple question that i am just cant comprehend. Its probalby something simple. I expected the h1 with the text Hi too get rendered or to get foo as output, but my website isnt showing any text at all
App.js
import './App.css';
import Navbar from './Components/Navbar';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom'
function App() {
return (
<div className='App'>
<h1> Hi </h1>
<>
<Router>
<Navbar/>
<Routes>
<Route path='/' exact/>
</Routes>
</Router>
</>
</div>
);
}
export default App;
Navbar.js
import './Navbar.css';
import React, {useState} from 'react'
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav className='navbar'>
<div className='navbar-container'>
<Link to="/" >foo</Link>
</div>
</nav>
)
}
export default Navbar;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
After further testing it has shown that when i delete everything in the return function of App.js except the h1 Hi gets rendered.
I am gussing probably this is the issue. You are using React <18 and trying to use createRoot which is not there.
Change
//Don't use below because it's in React 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
to
let rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
Here is working example https://stackblitz.com/edit/github-pagkyw
The code is working properly now. The issue was that i installed react-router-dom one folder above the normal rreact app so that i had two seperate package.json files. I've uninstalled react-router-dom and reinstalled it in the same folder of the react folder. The json files got merged and then it worked after reloading
want to add class to font picker react. I tried with simple using class but it was not added.
version "font-picker-react": "^3.4.1",
import React from "react";
import FontPicker from "font-picker-react";
<FontPicker
apiKey="AIzaSyCrAmkqacuiyammyv400dq-l6QUNZkoMSE"
activeFontFamily={this.state.activeFontFamily}
onChange={(nextFont) =>
this.setState({
activeFontFamily: nextFont.family
})
}
/>
import React from 'react';
import styled from 'styled-components';
function Navbar() {
return (
<Container>
<img src='./appleWhite.png' />
</Container>
)
}
export default Navbar
const Container = styled.div`
height: 24px;
You need to import the image into your project
import myImage from './appleWhite.png'
<img src={myImage} />
If you don't want to import the image. Then you need to place the image in the public folder then you can use it like this.
<img src={'/appleWhite.png'} />
During run time, your react code is being bundled and imported as scripts. What you are viewing is the index.html file. There is no src folder at run time which is why your code did not work.
i want to put an image as background image where multiple components like video component login component bottom component floats on top of it. what would be the exact code pattern for this this on react as i am new to it. All the video component and other component goes here. The code is like this below:
import React from 'react'
import Video from './Video.js'
import './Home.css'
import logo from './images/background.png'
function Home() {
return (
<div className="home">
<img src={ logo } />
</div>
)
}
export default Home
You should make a parent component and use that parent component to wrap the child component so that the parent component appears as an image overlay above child comp.
import React from 'react'
import Video from './Video.js'
import './Home.css'
import logo from './images/background.png'
function Parent() {
return (
<div className="home" style={{background: url(logo)}}>
{...props.children}
</div>
)
}
export default Home
now use this parent component as -
<Parent>
<Video src={videourl} >
</Parent>
I am trying to integrate redux with react-routing. I found a situation like,
i am accessing the same reducer by two component. i am updating the sate from one component, state is getting updated in store. while routing to the another component,again reducer is getting called automatically and intialized the state with default value.
Here what is happening as per my understanding,reducer is getting called from store and passing the state value as null, so it is taking the default value (feature of ES6) and in same way action.type would null only.
So, My question is why reducer is getting called for every routing even though there is no any user actioned performed. even though if it is calling the reducer, why store is passing null value to the state argument of reducer instead of the state updated by component before routing.
Reducer:
export const userReducer=function(state={name:"rohit",id:123},action){
console.log("user reducer called",state);
switch(action.type){
case "NEW_USER_REG":
console.log("user added");
state=Object.assign({},action.payload);
break;
case "DELETE_USER":
consol.log("user deleted");
break;
}
return state;
}
Component 1(reading and writing from store state):
import React from 'react';
import {Navbar} from '../component/navbar';
import {connect} from 'react-redux'
class Main extends React.Component{
render(){
return(
<div>
<h1>This is main comp.. below is state got from store</h1>
<input type="text" ref="name"/>
<button onClick={()=>this.props.register("rajesh")}>update state</button>
<hr></hr>
{this.props.user.name}
</div>);
}
}
const stateToprops=(state)=>{
return {
user:state.userReducer
}
}
const dispatchToProps=(dispatch)=>{
return{
register:(name)=>{
console.log("fun called ",name);
dispatch({
type:"NEW_USER_REG",
payload:{name:name,id:1}
})
}
}
}
export default connect(stateToprops,dispatchToProps)(Main);
Component 2(reading from store state):
import React from 'react';
import {connect} from 'react-redux';
export class Second extends React.Component{
render(){
return(
<div>
<h1>Hello, This is active component...</h1>
<hr></hr>
{this.props.user.name}
</div>
)
}
}
const stateToProps=(state)=>{
return{
user:state.userReducer
}
}
const dispatchToProps=(dispatch)=>{
return{
adduser:(expense)=>{
dispatch({type:"NEW_USER_REG",payload:expense})
}
}
}
export default connect(stateToProps,dispatchToProps)(Second);
Router Component :
import React from 'react';
import {
BrowserRouter as Router,
Route, Switch
} from 'react-router-dom';
import {Navbar} from '../component/navbar';
import Second from '../component/second';
import Main from '../component/main';
export class App extends React.Component{
render(){
return(
<div>
<div style={{height:80,backgroundColor:'#e8e3e4'}}></div>
<Navbar/>
<div className="text-align: center; margin: auto; width: 60%; padding: 10px;">
<div style={{height:5}}></div>
<div className="container-fluid">
<div className="row">
<div className="col-md-2"> </div>
<div className="col-md-8"style={{height:'auto',backgroundColor:'#e8e3e4'}}>
<Router>
<Switch>
<Route exact path='/' component={Main} />
<Route path='/contact' component={Second}/>
</Switch>
</Router>
</div>
<div className="col-md-2"></div>
</div>
</div>
</div>
</div>
);
}
}
anchor component using not
import React from 'react';
import {Second} from '../component/second';
export class Navbar extends React.Component{
render(){
let styles={width:10};
return(
<div >
<nav className="navbar navbar-inverse" >
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="/">My Learning Project</a>
</div>
<ul className="nav navbar-nav">
<li className="active">Home</li>
<li className="dropdown"><a className="dropdown-toggle" data-toggle="dropdown" href="#">Service<span className="caret"></span></a>
<ul className="dropdown-menu">
<li>Register</li>
<li>Get-Profile</li>
<li>Update</li>
</ul>
</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route, Switch
} from 'react-router-dom';
import {App} from './app'
import {store} from './store.js'
import {Provider} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('content')
);
Could you please post some snippets of your code like the reducer which is getting called twice and the 2nd component particularly the part where you are dispatching the action. That way we can probably help you.
Solution
OP was using anchor tags <a> to navigate to different urls which were making the page to reload and the redux store to get created again. Switching to <Link> solved the issue.