I am trying to learn HOC in reactjs and trying to understand this basic example..
I have 3 files named First.js, Second.js and App.js. Now how I need to define those files so that computation done in first file should be accessible to second file.
App.js
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import First from './First';
import Second from './Second';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={First}/>
<Route exact path='/Second' component={Second}/>
</Switch>
</Router>
);
}
}
export default App;
First.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Second from './Second';
class First extends Component{
constructor(props){
super(props);
this.state={
number : 1,
};
}
increment = event => {
this.setState({
number : this.state.number + 1
});
}
decrement = event => {
this.setState({
number : this.state.number - 1
});
}
render(){
return(
<div>
{this.state.number}
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<Second number={this.state.number}/>
<Link to='/Second'>Second</Link>
</div>
);
}
}
export default First;
Second.js
import React, {Component} from 'react';
class Second extends Component{
render(){
return(
<div>
{this.props.number}
</div>
);
}
}
export default Second;
I want to access First.js variable in second.js. Give me solution.
Thanks in advance.
Try this
<Route path="/Second" render={()=> (
<div>
100
</div>
)}/>
The above implementation that you have shown isn't of an HOC, rather a simple Route implementation, Since you are rendering the Second component inside of First you would want to render the /second route inside first
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import First from './First';
import Second from './Second';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/' component={First}/>
</Switch>
</Router>
);
}
}
export default App;
First.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Second from './Second';
class First extends Component{
constructor(props){
super(props);
this.state={
number : 1,
};
}
increment = event => {
this.setState({
number : this.state.number + 1
});
}
decrement = event => {
this.setState({
number : this.state.number - 1
});
}
render(){
return(
<div>
{this.state.number}
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<Route path="/Second" render={(props)=> <Second number={this.state.number} {...props}/>} />
<Link to='/Second'>Second</Link>
</div>
);
}
}
export default First;
Related
I have a Smart component class page PhoneDirectory.js, where I have used BrowserRouter and Route to route to the ShowSubscribers page("/") and AddSubscribers page ("/add"). My requirement is to redirect to the ShowSubscribers page("/") upon form submission on the AddSubscribers page but not understand how to implement that. I tried using this.props.history.push("/") but it isn't working. I am new to React, can anyone please help?
import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import {BrowserRouter , Route, Routes} from 'react-router-dom';
export default class PhoneDirectory extends React.Component{
constructor(){
super();
this.state = {[]};
}
addSubscribers = (subscribers) =>{...}
deleteSubscribers = (subscriberId) =>{...}
render() {
return (
<BrowserRouter>
<Routes>
<Route exact path='/' element={<ShowSubscribers deleteSubscribers={this.deleteSubscribers} subscribersList={this.state.subscribersList}/>}/>
<Route exact path='/add' element={<AddSubscriber addSubscribers={this.addSubscribers}/>}/>
</Routes>
</BrowserRouter>
)
}
}
Dumb component AddSubscriber page
import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
import {Link} from "react-router-dom";
export default class AddSubscriber extends React.Component {
constructor() {
super();
this.state = {
id: 0,
name:'',
phone:''
}
}
onChangeHandler = (event) =>{...}
onFormSubmitted = (event) =>{
event.preventDefault();
this.props.addSubscribers(this.state);
this.setState({id:0, name:"", phone:''});
// Need logic to redirect to "/" i.e., ShowSubscribers page
}
render() {
return (<div>
<Header heading="Add Subscriber"/>
<div className="component-body-container">
<Link to="/">
<button className="custom-btn">Back</button>
</Link>
<form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
...............
<button type="submit" className="custom-btn add-btn">Add</button>
</div>
</form>
</div>
</div>)}
}
I tried this.props.history.push("/"), but it didn't worked.
react-router-dom v6 support only hooks version i suggest since you use class component to downgrade the version of react-router-dom in package.json.
"dependencies": {
...
"react-router-dom": "5.2.1",
},
Now you need to run : npm install or yarn install
Your Route component will look like that
import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
export default class PhoneDirectory extends React.Component{
constructor(){
super();
this.state = {[]};
}
addSubscribers = (subscribers) =>{...}
deleteSubscribers = (subscriberId) =>{...}
render() {
return (
<Router>
<Switch>
<Route exact path='/'>
<ShowSubscribers {...your props goes here}/>
</Route>
<Route exact path='/add'>
<AddSubscriber {...your props goes here}/>
</Route>
</Switch>
</Router>
)
}
}
Now you are able to call this.props.history.push
import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
export default class AddSubscriber extends React.Component {
constructor() {
super();
this.state = {
id: 0,
name:'',
phone:''
}
}
onChangeHandler = (event) =>{...}
onFormSubmitted = (event) =>{
event.preventDefault();
this.props.addSubscribers(this.state);
this.setState({id:0, name:"", phone:''});
// Need logic to redirect to "/" i.e., ShowSubscribers page
}
render() {
return (<div>
<Header heading="Add Subscriber"/>
<div className="component-body-container">
<button className="custom-btn" onClick={()=>this.props.history.push('/')} >Back</button>
<form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
...............
<button type="submit" className="custom-btn add-btn">Add</button>
</div>
</form>
</div>
</div>)}
}
I think that you need to wrap your AddSubscriber page with withRouter HOC
class AddSubscriber extends React.Component{
...some-code....
}
export default withRouter(AddSubscriber)
you need navigation logic (this.props.history.push("/"))
to be located a addScubscribers page.
(you have it at "homepage" instead)
I am new to React ans was learning Context API and during the use of it I faced this error TypeError: render is not a function. I also found the this answer React Context: TypeError: render is not a function in the platform which is close to my problem but no result. Here is the code I am using:
import React, { Component } from "react";
import MyContext from "../../Containers/Context/Context";
class Track extends Component {
render() {
return (
<MyContext>
{value => {
return <div>{value.heading}</div>;
}}
</MyContext>
);
}
}
export default Track;
import React, { Component } from "react";
const Context = React.createContext();
export class MyContext extends Component {
state = { track_list: [], heading: "Top Ten Tracks" };
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
);
}
}
export default MyContext = Context.Consumer;
import React, { Component, Fragment } from "react";
import "./App.css";
import Header from "../src/Components/Header/Header";
import Search from "../src/Components/Search/Search";
import Tracks from "../src/Components/Tracks/Tracks";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Components/NotFound/NotFound";
import MyContext from "./Containers/Context/Context";
class App extends Component {
render() {
return (
<MyContext>
<Router>
<Fragment>
<Header />
<div className="container">
<Search />
<Switch>
<Route exact path="/" component={Tracks} />
<Route component={NotFound} />
</Switch>
</div>
</Fragment>
</Router>
</MyContext>
);
}
}
export default App;
Your export and import statements are problematic.
first you export class MyContext then you immediately overwrite MyContext with Context.Consumer.
Fix your export statements and then fix your imports. import the Context.Consumer in file Track, and import the Context.Provider in file App
Containers/Context/Context.js
import React, { Component } from "react";
const Context = React.createContext();
class MyContextProvider extends Component {
state = { track_list: [], heading: "Top Ten Tracks" };
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
);
}
}
const MyContextConsumer = Context.Consumer;
export {MyContextProvider,MyContextConsumer};
Track.js
import React, { Component } from "react";
import {MyContextConsumer} from "../../Containers/Context/Context";
class Track extends Component {
render() {
return (
<MyContextConsumer>
{value => {
return <div>{value.heading}</div>;
}}
</MyContextConsumer>
);
}
}
export default Track;
App.js
import React, { Component, Fragment } from "react";
import "./App.css";
import Header from "../src/Components/Header/Header";
import Search from "../src/Components/Search/Search";
import Tracks from "../src/Components/Tracks/Tracks";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Components/NotFound/NotFound";
import {MyContextProvider} from "./Containers/Context/Context";
class App extends Component {
render() {
return (
<MyContextProvider>
<Router>
<Fragment>
<Header />
<div className="container">
<Search />
<Switch>
<Route exact path="/" component={Tracks} />
<Route component={NotFound} />
</Switch>
</div>
</Fragment>
</Router>
</MyContextProvider>
);
}
}
export default App;
I've seen many answer on this website and in official docs and many other places. But I couldn't able to achieve results. That's why I'm posting this question.
SO, my question is I have 3 files named:
App.js, SignUp.js and Welcome.js.
My task is to get value in form from SignUp.js page and print that value to the Welcome.js component. I read about lifting state up and higher order components but couldn't able to do it.
Any help is appreciated.
Here's my code:
App.js:
import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
render(){
var homeMessage = () =>{
return(<div><SignUp /></div>);
}
return(
<Router>
<div>
<Route exact path="/src/Welcome" component={Welcome}/>
<Route exact path="/" component={homeMessage}/>
</div>
</Router>
);
}
}
export default App;
SignUp.js;
import React,{Component} from "react";
import {Link} from "react-router-dom";
export default class SignUp extends Component {
constructor(props){
super(props);
this.state = {
firstName:''
};
}
inputData = event =>
{
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event =>
{
event.preventDefault();
}
render(){
return(
<div>
<form onSubmit={this.submitData}>
<input type="text" name="firstName" onChange={this.inputData}/>
<button type="submit"> Submit</button>
</form>
<Link to="/src/Welcome">Welcome</Link>
</div>
);
}
}
Welcome.js:
import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
render(){
return(
<div>
{this.state.firstName}
</div>
);
}
}
"And please give answer if possible then in react-way only not redux or any other library. Because as per Dan Abramov article "Thinking in React" so first I want to try all scope which is available in react only."
Pass the data back to the parent from SignUp component and then pass it as a prop to the Welcome component. The other way is to store the SignUp component state in the App component so that you don't need to pass it back up when you submit.
App.js
import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
state = {
firstName: ''
}
onSignIn = (value) => {
this.setState({firstName: value});
}
render(){
return(
<Router>
<div>
<Route exact path="/src/Welcome" render={(props) => <Welcome firstName={this.state.firstName} {...props}/>}/>
<Route exact path="/" render={(props) =>{
return(<div><SignUp onSignIn={this.onSignIn} {...props} /></div>);
}}/>
</div>
</Router>
);
}
}
export default App;
SignUp.js
export default class SignUp extends Component {
constructor(props){
super(props);
this.state = {
firstName:''
};
}
inputData = event =>
{
this.setState({
[event.target.name]:event.target.value
});
}
submitData = event =>
{
event.preventDefault();
this.props.onSignIn(this.state.firstName);
}
render(){
return(
<div>
<form onSubmit={this.submitData}>
<input type="text" name="firstName" onChange={this.inputData}/>
<button type="submit"> Submit</button>
</form>
<Link to="/src/Welcome">Welcome</Link>
</div>
);
}
}
Welcome.js
import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
render(){
return(
<div>
{this.props.firstName}
</div>
);
}
}
Some useful links:
How to pass data from child component to its parent in ReactJS?
Passing custom props to router component in react-router v4
ReactJS - Lifting state up vs keeping a local state
I have a code which displays four images and when one image is clicked out of those, it takes up the whole screen.I am using react router to implement the same.
The code is like this
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {FirstPage} from './FirstPage.js';
import {Panorama} from './Panorama.js';
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom';
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<BrowserRouter>
<Switch>
<Route path="/" component={FirstPage} />
<Route path="/image/:id" component={Panorama} />
</Switch>
</BrowserRouter>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('container'));
FirstPage.js
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import {Panorama} from './Panorama.js';
import {Redirect} from 'react-router-dom';
class FirstPage extends React.Component{
constructor(props){
super(props);
this.state={
list:[],
images:[],
isClicked:false,
redirect:true
}
this.loadImages=this.loadImages.bind(this);
this.loadOne=this.loadOne.bind(this);
}
componentDidMount(){
window.addEventListener('load',this.loadImages);
}
loadImages(){
console.log("load");
var that=this;
$.ajax({
type:'GET',
url:'https://demo0813639.mockable.io/getPanos',
datatype:'jsonp',
success:function(result){
var images=that.state.images;
for(var i=0;i<result.length;i++){
that.state.images.push({"pano":result[i].pano,"name":result[i].name});
}
that.setState({
images:images
})
}
})
}
loadOne(pano){
this.setState({
isClicked:true,
imageUrl:pano
})
}
render(){
var list=this.state.list;
return this.state.isClicked?<Redirect to={'/image/${this.state.imageUrl}'}/>:
<div> {this.state.images.map((result)=>{
return(<div className="box">
<div className="label">{result.name}</div>
<img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/>
</div>
)
})}
</div>
}
}
module.exports={
FirstPage:FirstPage
}
Panorama.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {Link} from 'react-router-dom';
class Panorama extends React.Component{
render(){
return(
<div>
<div className="pano">
<img id="myImage" src={props.match.params.id} />
<div className="goback"><Link to="/">Go back</Link></div>
</div>
)
}
}
module.exports={
Panorama:Panorama
}
With this the URL becomes something like this
http://localhost:8080/image/$%7Bthis.state.imageUrl%7D
after clicking on an image and nothing comes up on the screen.With this,
Redirect to={{pathname='/image',params:{this.state.imageUrl}}}
I get syntax errors
What is the correct way of doing this?
It looks like you are using single quotes instead of back-ticks to produce the string inside your to prop.
Try changing
<Redirect to={'/image/${this.state.imageUrl}'}/>
to:
<Redirect to={`/image/${this.state.imageUrl}`}/>
are you using react-router 3 i recommend you to use redirect function provided by react-router 3, that is this.context.router.push() to start redirect.
sample code in component :
class FirstPage extends React.Component{
constructor(context)
{
super(context)
}
...
}
FirstPage.contextTypes = {
router: PropTypes.object.isRequired
}
sample redirect action in react-router 3 :
this.context.router.push({ pathname: `/image${this.state.imageUrl}`})
sample redirect action in react-router 4 :
this.context.router.history.push({ pathname: `/image${this.state.imageUrl}`})
I am doing this Router tutorial.
My App.jsx file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
my Main.js file:
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
This error is written to the console: index.js:
Uncaught ReferenceError: ReactDOM is not defined
I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.
You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render.
Also need to import React in all files that use JSX.
Finally, also put react-router imports into Main, too.
The way imports work is, you import things you need, in places they're needed. It's not enough to import them once in one file and use in others.
Change Main.js to look like
import ReactDOM from 'react-dom'
import React from 'react'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
This error also happens if there is a Typo
"import ReactDOM from "react-dom";"
and then call Reactdom.render( <App />, document.getElementById('root')) instead of ReactDOM.render....
1) install "npm install --save react-router-dom" with this command.
2) Know modify your App.jsx like this
import React from 'react';
import { Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<header>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
</nav>
</header>
);
}
}
class Content extends React.Component {
render() {
return (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</main>
);
}
}
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
);
}
}
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
);
}
}
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
);
}
}
export default App;
4) modify your main.js like this
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import {HashRouter} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), document.getElementById('app'))
I had the same issue with my ReactDOM.render not to work until I imported the following:
import ReactDOM from 'react-dom'
into the page I created, which was the shopping cart page.
you should import ReactDOM and other stuff in Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import {App, Home, About,Contact} from './App'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
if App.js file contains all components you should change export statements:
from export default Component
to export Component.
And use named import in Main.js import {App, Home, About,Contact} from './App'
import React from 'react';
import { Link, browserHistory} from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export Contact;
for browserHistory, you must configure your server appropriately to serve at all routed paths. The simplier way is using hashHistory.
//import hashHistory
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
...
//pass in Router
<Router history = {hashHistory}> ....
I just have a simple solution for it!
in my case the problem was with ReactDom namespace. just change it to something else and it work!
import XReactDom from 'react-dom'
In this tutor this command "npm install react-router" does not save it in package.json file so modify and run command to "npm install --save react-router".
RouterDOM is used in main file, in your case its Main.js (where rendering takes place). Your Main.js file is the starting point and as its render reactDOM but cannot find the import for it.
Just to import it in same file where its used.
I had a similar issue and was able to fix it by importing ReactDOM like this:
import * as ReactDOM from 'react-dom';
And then used it like this:
<Fragment>
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById("backdrop-root")
)}
</Fragment>