We Keep Coding

How to have the same component on different routes in next js? [duplicate]

Trying next with layout pattern:
https://github.com/zeit/next.js/tree/canary/examples/layout-component
And the problem is that Layout component get remounted on every page change. I need to use layout component as a Container so it'll fetch data from server on every mount. How can I prevent layout to get re-mounted? Or am I missing something there?

This helped me for persistent layouts. The author puts together a function that wraps your page components in your Layout component and then passes that fetch function to your _app.js. This way the _app.js is actually the components that renders the Layout but you get to specify which pages use which layout (in case you have multiple layouts).
So you have the flexibility of having multiple layouts throughout your site but those pages that share the same layout will actually share the same layout component and it will not have to be remounted on navigation.
Here is the link to the full article
Persistent Layout Patterns in Next.js
Here are the important code snippets. A page and then _app.js
// /pages/account-settings/basic-information.js
import SiteLayout from '../../components/SiteLayout'
import AccountSettingsLayout from '../../components/AccountSettingsLayout'
const AccountSettingsBasicInformation = () => (
<div>{/* ... */}</div>
)
AccountSettingsBasicInformation.getLayout = page => (
<SiteLayout>
<AccountSettingsLayout>{page}</AccountSettingsLayout>
</SiteLayout>
)
export default AccountSettingsBasicInformation
// /pages/_app.js
import React from 'react'
import App from 'next/app'
class MyApp extends App {
render() {
const { Component, pageProps, router } = this.props
const getLayout = Component.getLayout || (page => page)
return getLayout(<Component {...pageProps}></Component>)
}
}
export default MyApp

If you put your Layout component inside page component it will be re-remounted on page navigation (page switch).
You can wrap your page component with your Layout component inside _app.js, it should prevent it from re-mounting.
Something like this:
// _app.js
import Layout from '../components/Layout';
class MyApp extends App {
static async getInitialProps(appContext) {
const appProps = await App.getInitialProps(appContext);
return {
...appProps,
};
}
render() {
const { Component, pageProps } = this.props;
return (
<Layout>
<Component {...pageProps} />
<Layout />
);
}
}
export default MyApp;

Also, make sure you replace all the to <Link href=""></Link>, notice that only have change the Html tag to link.
I struggled because with this for many days, although I was doing everything else correctly, these <a> tags were the culprit that was causing the _app.js remount on page change

Even though this is the topic Layout being mounted again and again, the root cause of this problem is that you have some data loaded in some child component which is getting fetched again and again.
After some fooling around, I found none of these problem is actually what Next.Js or SWR solves. The question, back to square one, is how to streamline a single copy of data to some child component.
Context
Use context as a example.
Config.js
import { createContext } from 'react'
export default createContext({})
_App.js
import Config from '../Config'
export default function App({ Component, pageProps }) {
return (
<Config.Provider value={{ user: { name: 'John' }}}>
<Component {...pageProps} />
</Config.Provider>
)
}
Avatar.js
import { useContext } from 'react'
import Config from '../Config'
function Avatar() {
const { user } = useContext(Config)
return (
<span>
{user.name}
</span>
)
}
export default Avatar
No matter how you mount and dismount, you won't end up with re-render, as long as the _app doesn't.
Writable
The above example is only dealing with readable. If it's writable, you can try to pass a state into context. setUser will take care the set in consumer.
<Provider value={useState({})} />
const [user, setUser] = useContext(Config)
setUser is "cached" and won't be updated. So we can use this function to reset the user anytime in child consumer.
There're other ways, ex. React Recoil. But more or less you are dealing with a state management system to send a copy (either value or function) to somewhere else without touching other nodes. I'll leave this as an answer, since even we solved Layout issue, this problem won't disappear. And if we solve this problem, we don't need to deal with Layout at all.

ReactJS, Context API) Read another component's state without passing down as prop to it?

I have started learning basic of Context API in ReactJS.
This is a part of reactJS code which uses reactJS.
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import LeftPane from './LeftPane';
import RightPane from './RightPane';
import {SampleProvider} from './sample';
const App =()=>{
return(
<SampleProvider>
<div className="panes">
<LeftPane/>
<RightPane/>
</div>
</SampleProvider>
)
}
export default App;
ReactDOM.render(
<App/>,
document.getElementById('root')
)
RightPane.js
RightPane.js
import React from 'react';
import Receives from './Receives';
const RightPane =()=>{
return(
<div className="pane">
<Receives/>
</div>
)
};
export default RightPane;
sample.js
import React,{Component , createContext} from 'react';
const Context = createContext();
const {Provider, Consumer : SampleConsumer}=Context;
class SampleProvider extends Component{
state={
value:'default value'
}
actions={
setValue:(value)=>{
this.setState({value});
}
}
render(){
const {state,actions}=this;
const value={state,actions};
return(
<Provider value={value}>
{this.props.children}
</Provider>
)
}
}
export{
SampleProvider,
SampleConsumer
};
Receives.js
import React from 'react';
import {SampleConsumer} from './sample';
const Receives = ()=>{
return(
<SampleConsumer>
{
(sample)=>(
<div>
Value:{sample.state.value}
</div>
)
}
</SampleConsumer>
)
}
console.log(Receives);
export default Receives;
Everything is fine. I understand everything except the function in SampleConsumer
component.
function in SampleConsumer uses sample as parameter.
I tested and sample.state.value renders 'default value' and it is the value of the state which is declared in SampleProvider component.
SampleProvider passes down the state as props to Provider component. I understand
Provider can use that state. But how the parameter in SampleConsumer understands
state in SampleProvider component? I have never passed the state as props to
SampleProvider component ..(I understood so. Maybe it's wrong)
I read this documentation
https://reactjs.org/docs/context.html
but didn't understand 100%

Everything is fine. I understand everything except the function in SampleConsumer component.
You have set SampleConsumer to point to the raw Consumer output of createContext(). It will function exactly the same as the ThemeContext.Consumer example in the docs.
function in SampleConsumer uses sample as parameter. I tested and sample.state.value renders 'default value' and it is the value of the state which is declared in SampleProvider component.
You have wrapped the raw Provider output of createContext() with your SampleProvider component. As you did so, you set the Provider's context value to (initially) be:
{
state: {
value: 'default value'
},
actions: {
setValue: (value) => { this.setState({value}) }
}
}
Meaning that whenever you invoke SampleConsumer that is a child of SampleProvider, the argument in the "child as a function" will be passed that value. In other words, this would display the string representation of the object in the above snippet:
<SampleConsumer>
{ (value) => <div>{value.toString()}</div> }
</SampleConsumer>
SampleProvider passes down the state as props to Provider component. I understand Provider can use that state.
Correct - you have set Provider's value prop to be equal to an object that contains SampleProvider's state.
But how the parameter in SampleConsumer understands state in SampleProvider component?
This is exactly what the context API accomplishes. SampleConsumer has access to Provider's value prop, without needing to pass the prop through all the child elements in between. Note that your code here doesn't have anything in between, so it's a little trivial; the docs you linked provide a better example.
I have never passed the state as props to SampleProvider component ..(I understood so. Maybe it's wrong)
You passed SampleProvider's state as a prop to Provider. Provider, in turn, passed its prop down to SampleConsumer.
I think the core of the misunderstanding here is your use (or naming) of SampleProvider. I'm not sure what you're trying to do with that state, but it's not really a "Provider" anymore and makes things confusing. This is unlike your SampleConsumer, which is still the default Consumer, just renamed.

React.js : Passing Props from a Function to a Component

I'm trying to have App (component) call Main (function) which in turn calls Leads (component) and I want the props to follow. Main is the function that returns all the routes for my App. I'm using React Router v4.
I've simplified the code as much as possible below, hopefully not too much:
App calls Main and passes props: leads & library.
App.js
class App extends Component {
render() {
return (
<div>
<nav>
<Link to="/library">Library</Link>
<Link to="/leads">Leads</Link>
</nav>
<Main
leads={this.state.leads}
library={this.state.library}
/>
</div>
);
}
}
export default App;
Props are available here, no problem. My understanding however is that props is a local variable to the function Main, so having something point to it is the issue as props is destroyed once the function has run.
Main.js (simplified)
const Main = (props) => (
<main>
<Switch>
<Route exact path="/leads" render={(props) => (
<Lead
{...props}
leads={props.leads}
/> )}
/>
</Switch>
</main>
)
export default Main;
Here, this.props.leads in Leads.js points to null and {Object.keys(this.props.leads)} fails. (I've removed the code for renderLeads() for simplicity)
Leads.js (simplified)
class Lead extends React.Component {
render() {
return (
<div>
<h2>Leads</h2>
<table>
<tbody>
{Object.keys(
this.props.leads).map(
this.renderLeads)}
</tbody>
</table>
</div>
);
}
}
export default Lead;
I've "solved" this problem by making Main an extended class of React.Component. I still feel Main should be a function has it only manipulates the data and doesn't hold data of its own...
Should Main be a function?
Is my assessment of the situation accurate?
What would the proper way of passing props from Main to Leads be?
Thanks in advance.

Your mistake is known by "variable shadowing", when you declare a variable in a inner scope with the same name of another one that lives in a upper scope, in this case, the variable 'props'.
In the Main.js, you're rendering the <Lead /> passing an functional component to the route, passing the props that the Router gives to you, not the one you pass when you rendering <Main /> in the App.js.
I know is a bit confusing, but this explains why it worked when you change Main to an Class component, you probably was calling with this.props, right? So in this case you calling the right one.
You can decide if <Main /> should be a functional component or an class, but usually components that don't have state should be functional. You can simply change the names of your props in your outer scope (in the main) or in the inner (Route). Example:
<Route exact path="/leads" render={(routerProps) => (
<Lead
{...routerProps}
leads={props.leads}
/> )}
/>
Now, we're passing the right props in the leads.

React.js How to render component inside component?

I am stuck. I have several seperate components on seperate files. If I render them in main.jsx like following:
ReactDOM.render(<LandingPageBox/>, document.getElementById("page-landing"));
ReactDOM.render(<TopPlayerBox topPlayersData={topPlayersData}/>, document.getElementById("wrapper profile-data-wrapper"));
ReactDOM.render(<RecentGamesBox recentGamesData={recentGamesData}/>, document.getElementById("history wrapper"));
Everything works fine, but I wonder if it is a good practice? Maybe it is possible to do something like there would be only one ReactDom.render like:
ReactDOM.render(<LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/>, document.getElementById("page-landing"));
I tried different kinds of variatons of LandingPageBox to somehow include those other two components, but had no luck. They sometimes rendered outside the page and so on. I thought it should look something like this:
import React from 'react';
import RecentGames from '../RecentGames/RecentGames.jsx';
import TopPlayers from '../TopPlayers/TopPlayers.jsx';
import PageTop from './PageTop.jsx';
import PageBottom from './PageBottom.jsx';
class LandingPageBox extends React.Component {
render() {
return (
<body className="page-landing">
<PageTop>
<TopPlayers topPlayersData={this.props.topPlayersData} />
</PageTop>
<PageBottom>
<RecentGames recentGamesData= {this.props.recentGamesData}/>
</PageBottom>
</body>
);
}
}
export default LandingPageBox;
But this code only renders PageTop and PageBottom, without player or game components.
So my question would be, how to set up LandingPageBox file so that TopPlayers component would render inside PageTop component and RecentGames component would render inside PageBottom component? Thank you.

In your example
return (
<body className="page-landing">
<PageTop>
<TopPlayers topPlayersData={this.props.topPlayersData} />
</PageTop>
<PageBottom>
<RecentGames recentGamesData= {this.props.recentGamesData}/>
</PageBottom>
</body>
);
React will only render the top-level custom components PageTop and PageBottom, as you already found out. The other components (TopPlayers and RecentGames) are nested within those components. What does that mean? React does not just display those nested components because it would not know how to do this. Instead, all rendering must be done by the outer components PageTop and PageBottom. React just passes the nested components to them (PageTop gets TopPlayers, PageBottom gets RecentGames) in this.props.children. Now it is up to the outer components what to do with these nested components. In your example, you would modify the PageTop and PageBottom components to use {this.props.children} to display their nested components in a suitable way.

You are right. You can use as many nested components as you want. It's one of the main concepts in react.
You can access them in this.props.children.
Do it like this:
var Parent = React.createClass({
render: function() {
return <div>{this.props.children}</div>;
}
});
ReactDOM.render(
<Parent>
<Child/>
<Child/>
</Parent>,
node
);
Read more here - https://facebook.github.io/react/docs/multiple-components.html
And here - http://buildwithreact.com/article/component-children

Here Car component is inside the another component i.e Garage components.
When Garage component in rendering Car component is also renders.
Same concept as like one function inside another function.
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));

What are the best practices to get React JS private methods?

When you set a component or element callback for an event, tutorials and documentation show code like this:
'use strict';
import React from 'react';
let FooComponent = React.createClass({
handleClick(args) {
...
},
render() {
return <div>
<h1>Some title</h1>
<button onClick={this.handleClick}>Click Me!</button>
</div>
}
};
export default FooComponent;
But this handleClick method can be accessed out of this component, if I'd use FooComponent on another component and assign it a reference I can access the handleClick from this other component.
'use strict';
import React from 'react';
import FooComponent from './FooComponent';
let BarComponent = React.createClass(
handleBarComponentClick(e) {
this.refs.fooComponent.handleClick(null);
},
render() {
return <div>
<FooComponent ref="fooComponent" />
<button onClick={this.handleBarComponentClick}>Other click</button>
</div>
}
);
export default BarComponent;
I don't like the fact that I can access that method, which in my opinion should be private or maybe I don't have to worry about it. But to fix that I started using this "good/bad practice" in my projects to avoid that method from being accessed.
'use strict';
import React from 'react';
function handleClick(args) {
...
}
let FooComponent = React.createClass({
render() {
return <div>
<h1>Some title</h1>
<button onClick={handleClick.bind(this)}>Click Me!</button>
</div>
}
};
export default FooComponent;
So it cannot be accessed from outside components.
My doubt is, if what I'm doing is a good or bad practice, or what could be the problems that could happen or not if I continue doing this? Or maybe I don't have to worry to set the event handlers inside the createClass argument?
Thanks in advance :)

Have you checked the Flux pattern? https://facebook.github.io/react/docs/flux-overview.html
In my React apps, this is not a concern. Although I do not define event handlers in a private way, the general rule is that you NEVER call a method on a component. If the subcomponent needs to notify its parent of something, this is accomplished either by a callback transferred from parent to child as a prop or by mutating a global state (via an action) in the child component. If, on the other hand, is the parent that needs to accomplish something on the child, then it changes the props (or the values of such props) on the subcomponent.
Trying to answer your question, I'd say that what you are doing right now (defining the event handlers in a private scope) is ok. But I think is more of a hassle to do such a thing for every handler. I would suggest you to review if the general architecture of your app is in line with what React suggests.