We Keep Coding

How to force tabs to mount without ever clicking on the tab?

Using React & material-ui, I have a pretty big tab container and want to keep data fetches local to each Tab component. I want to be able to essentially greedy load some of the Tab components so as soon as the Tab container is mounted, the Tabs with a greedyLoad prop passed to them are mounted (although not the active tab/visible) and make the fetch for the data they need.
The reason is some of the tabs need a count from the data I fetch in the tab label.
I understand I can fetch the data from the parent component and pass the data as a prop downwards, but I really would like to keep the fetch’s local to each tab component. I’ve seen it done at a previous company I worked at and totally forgot how it worked. Something with CSS I think. Thanks in advance

If you hide the component with CSS, your component will mount on the DOM, but it will be invisible to the user. We just need to add some inline css and make use of the display: none property
function myComponent(show) {
// TODO: fetch the data
return (
<div style={{display: show ? "block" : "none"}}>
<h1 >This component may be invisible!</h1>
<p>{data}</p>
</div>
);
}

Conditionally rendering the same component does not trigger mounted() hook

I'm pretty new to Vue so please correct me if my thinking process is wrong. I'm trying to conditionally render a component like this:
<div>
<Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1"></Map>
<Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2"></Map>
</div>
My goal here is to render the same component with different props depending on the v-if state. So when bool is true it should render the first component, and when i toggle bool to be false, it should render the second option. The props seems to be changing correctly, but when i toggle the bool state it does not seem to run the mounted() hook again, which is an indication that component1 does not seem to dismount, it just switches out the props basically.
What I want is that when bool is false, it should render a fresh version of that whole component instance, and be isolated of what previously was going on in component 1.
How can I achieve this?

according to Linus Borg's answer here, You should add a unique key attribute to both of them.

You can a achieve this by using key attribute
Specify different key for the 2 Map components.
<Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1" key="map1"></Map>
<Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2" key="map2"></Map>

Toggle state from another component

I'm pretty new to React and Redux so I may be doing this completely the wrong way, in fact judging from a few other answers to similar questions on here I suspect I'm doing quite a lot wrong.
I've got a button in my 'Layout' component which adds a class to a div, this class comes from a state. The button is a toggle and will turn the state & class on and off (this will result in making a menu appear and dimming the rest of the page).
However I also want any interaction with the 'Nav' component (which lives inside a 'Header' component which in turn lives in 'Layout') to also toggle the state & class (so clicking a link collapses the menu). In jQuery/VanillaJS this was incredibly easy but I can't seem to work out the React/Redux way of doing this.
Layout Component: https://pastebin.com/WzpbeSw7
Header Component: https://pastebin.com/c34NFtUx (probably not relevant but here for reference)
Nav Component: https://pastebin.com/EsJDuLQc

By using redux :
You can have a state like toggleBlaBla : "show" . If you connected your react component to state of redux by using react-redux , whenever you dispatch an action for changing toggleBlaBla to "hide", your connected component will rerender.
By using only react :
If you want two components to change some ui state by some events, it is a good idea to put them in a container component, so that whenever your state changes these two components rerender with your changed state passing to both components.

One way to achieve this is to do the following:
In Layout component:
On line 26 change <Header / > to: <Header handleNavClick={this.toggleNav.bind(this)} / >
In Header component:
On line 10 change <Navigation position="header" /> to: <Navigation closeNav={this.props.handleNavClick.bind(this)} position="header" />
In Navigation component:
On line 16 change return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li> to: return <li key={item._id}><Link to={item.slug} onClick={this.props.closeNav.bind(this)}>{item.name}</Link></li>
Passing the props in this way will allow you to reference reference the toggleNav function inside of Layout and then will update the state accordingly.
*** Note, you may get a binding error such as React component methods may only be bound to the component instance..
If this happens, you will need to define a function on the Navigation component instead of using this.props.closeNav directly. You would need to create a function in Navigation like this: closeNav() { this.props.closeNav.bind(this) }. Don't forget to update the function on the <Link /> component to this.closeNav.bind(this)

ReactCSSTransitionGroup - how to override componentWillLeave(callback)?

I'm trying to access the componentWillMount hook in order to fade out a canvas element that is not a child of the transitioning <Home> component. (Animation of <Home> itself works as expected.)
<ReactCSSTransitionGroup transitionName="screenTrans" transitionEnterTimeout={200} transitionLeaveTimeout={3000}>
<Home key={'home'} />
</ReactCSSTransitionGroup>
Home.js:
export default class Home extends React.Component {
...
componentWillLeave( callback ) {
console.log( "am i getting called?" ) // no!
this.fadeOutCanvas();
}
}
What am I missing? Thanks...

Quite late answer but I'm now facing the same problem.
The thing is that you're using ReactCSSTransitionGroup which does NOT call the callbacks like ReactTransitionGroup (different component). The problem is that you would need a component that does both (sets css AND calls your callback)
From the docs:
When using ReactCSSTransitionGroup, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level ReactTransitionGroup API which provides the hooks you need to do custom transitions.
Checked around and I couldn't find anything, so I'll write my own component and hopefully open source it!

React JS: data flow between grandparents/grandchildren

I intend to set up the following React Component
<tab-box>
<title>Example</title>
<butons>
<button id="actionID1"></button>
<button id="actionID2"></button>
<button id="actionID3"></button>
</butons>
<content>
<tabList>
<tab id="tab1" label="label1"></tab>
<tab id="tab2" label="label2"></tab>
</tabList>
</content>
</tab-box>
Where I would like to pull out each label attribute for tab to set up a nav bar on top of the actual content.
The question is, how do I pull out the attributes from nested children? Or how can I restructure the component so that I don't have this issue?
Thought1: use a global Store service, children like tab populate the Store and parents may retrieve them when being mounted
UPDATE, Thought2: make labels a prop on tab-box, but I still don't feel quite right..

There are ways to do it, but i doubt it is what you ultimately want. You want the parent to obtain information about the child? This doesn't make sense as you are trying to create "components" and not some code specific to one task.
Think of it this way. The tabs should be using tab component to display its own information. Under what circumstance would the tab know more than its parent? If so then is it even a component? Who is using who?
React is suited for one way data flows from parent to child, so it makes more sense to hold information in tabs component, and pass pieces of info to child tabs.
<tabs>
<button text={tab[0].text}/>
<tab>
write transcluded children here
</tab>
</tabs>
Even this begs the question - why are you using so many components to begin with? Why not use css classes to represent tabs container and individual tabs like a normal person?
If you insist on making a tabs component, at least keep it all in one component, something like
<tabs data={[{title:"tab-title", content: (<p>stuff</p>)}]} />
Also I absolutely do not agree with defining tabs in a model/store. common sense is UI and data should be separate.
As someone else mentioned you can use ref, but i'd reserve that for very limited purposes such as getting a field from a form.