We Keep Coding

React: Abstraction for components. Composition vs Render props

Long question please be ready
I've been working with react-query recently and discovered that a lot of the code has to be duplicated for every component that is using useQuery. For example:
if(query.isLoading) {
return 'Loading..'
}
if(query.isError) {
return 'Error'
}
if(query.isSuccess) {
return 'YOUR ACTUAL COMPONENT'
}
I tried creating a wrapper component to which you pass in the query information and it will handle all the states for you.
A basic implementation goes as follows:
const Wrapper = ({ query, LoadingComponent, ErrorComponent, children }) => {
if (query.isLoading) {
const toRender = LoadingComponent || <DefaultLoader />;
return <div className="grid place-items-center">{toRender}</div>;
}
if (query.isError) {
const toRender = ErrorComponent ? (
<ErrorComponent />
) : (
<div className="dark:text-white">Failed to Load</div>
);
return <div className="grid place-items-center">{toRender}</div>;
}
if (query.isSuccess) {
return React.Children.only(children);
}
return null;
};
And, using it like:
const Main = () => {
const query = useQuery(...);
return (
<Wrapper query={query}>
<div>{query.message}</div>
</Wrapper>
)
}
The issue with this is that query.message can be undefined and therefore throws an error.
Can't read property message of undefined
But, it should be fixable by optional chaining query?.message.
This is where my confusion arises. The UI elements inside wrapper should have been rendered but they donot. And, if they don't then why does it throw an error.
This means that, the chilren of wrapper are executed on each render. But not visible. WHY??
Render Props to rescue
Wrapper
const WrapperWithRP = ({ query, children }) => {
const { isLoading, data, isError, error } = query;
if (isLoading) return 'Loading...'
if (isError) return 'Error: ' + error
return children(data)
}
And using it like,
const Main = () => {
const query = useQuery(...);
return (
<Wrapper query={query}>
{state => {
return (
<div>{state.message}</div>
)
}
}
</Wrapper>
)
}
This works as expected. And the children are only rendered when the state is either not loading or error.
I am still confused as to why the first approach doesn't show the elements on the UI event when they are clearly executed?
Codesandbox link replicating the behaviour: https://codesandbox.io/s/react-composition-and-render-prop-tyyzh?file=/src/App.js

Okay, so i figured it out and it is simpler than it sounds.
In approach one: the JSX will still be executed because it's a function call React.createElement.
But, Wrapper is only returning the children when the query succeeds. Therefore, the children won't be visible on the UI.
Both approaches work, but with approach 1, we might have to deal with undefined data.
I ended up using render-prop as my solution as it seemed cleaner.

JSX Function doesn't show return

As the title says, I can not figure out why the return of a function doesn't show on screen.
The object words.First.wordsdata is holding key-value pairs
import React from "react";
const WordList = ({ words }) => {
return (
<div>
{ words &&
Object.entries(words.First.wordsdata).forEach(([key, value]) => {
return(<div>{key} - {value}</div>);
})
}
</div>
);
};
export default WordList;
If I change the return to log it out, then
this one does show everything correctly in dev tools
return(console.log(key, value));
To give a full view, this is the file that calls the component
class Words extends Component {
render() {
//console.log(this.props)
const { words, auth } = this.props;
if (!auth.uid) return <Redirect to="/" />;
return (
<div>
<WordList words={words} />
</div>
);
}
}
I tried changing the return to simple HTML and It still doesn't show anything

Thank you for the answers, indeed changing .forEach to .map did the trick.

Loading Div before render Page (React)

I have an page but it's heavy, and react still spend some seconds to load all components, i would like to put an div with greater z-index to overlap it. The problem:
componentWillMount prints 'test' on console, but do not render the div:
componentWillMount() {
return (
<div className={this.props.classes.modalLoading}>
TESTE
</div>
)
}
note css= 100vw, 100vh, bg: black, color: white
It's possible dismember in another component 'Loader' to use in another places? (console log don't work)
render() {
const { classes } = this.props
return (
<div className={classes.root} ref={'oi'}>
<LayoutCard {...this.props}/>
</div>
)
}
componentDidMount() {
{console.log('teste 3')}
}

Well, that is not how react works :)
It renders the JSX that is returned from the render() method.. the return value of the componentWillMount() is not associated with the render method.
If you want a loader you should set a state on the main component to swap between a return, that returns a loader div and the return that returns your page content. I'm not sure what you mean by 'loading' in react. Maybe any sync ajax stuff? Set a state after it finished.
if(this.state.loaded) {
return <Loader />
} else {
return <Content />
}
If you mean things like fonts, stylesheets and images...
well thats its a duplicate of
Show loading icon before first react app initialization

almost that, thx for the point #FelixGaebler
componentWillMount() {
this.setState({
flag: true,
})
}
render() {
const { classes } = this.props
if (this.state.flag) {
return (
<div className={this.props.classes.modalLoading}>
<span>TEST</span>
</div>
)
}
return (
<div className={classes.root}>
<LayoutCard {...this.props}/>
</div>
)
}
componentDidMount() {
this.setState({
flag: false,
})
}

Scalable React CSS using 'classnames' with BEM in mind

So, React newbie here... I'll start off by saying I have a simple single page application which consists of a few simple pages.
Using react-router I have a 'top-down' set up for my components. To give you a basic idea of my SPA structure see below:
index -- layout(react routers) --
|--About Page
|--Home Page
|--Contact Page
I am rendering a component called "GlobalHero" from my Home Page component.
Here is the GlobalHero.jsx component.
import React from "react";
var classNames = require('classnames');
import s from '../../../index.scss';
class GlobalHero extends React.Component {
constructor() {
super();
//sets initial state
this.state = {
fadeIn: "",
titleSelected: "",
subTitleSelected: ""
};
}
// <<========= ON COMPONENT RENDER =========
componentDidMount = () => {
console.log("GlobalHero");
console.log(this.props);
this.handleClass("fadeIn");
}
// =========>>
// <<========= CONTROLS THE STATE =========
handleClass = (param) => {
if (param === "fadeIn" && this.state.fadeIn != "true") {
this.setState({fadeIn: "true"});
}
if (param === "titleSelected" && this.state.titleSelected != "true") {
this.setState({titleSelected: "true"});
}
if (param === "subTitleSelected" && this.state.subTitleSelected != "true") {
this.setState({subTitleSelected: "true"});
}
}
// =========>>
render() {
const heroImg = require(`../../../images/hero${this.props.page}.jpg`);
//REMOVES CLASS IN REALTIME BASED ON STATE'S VALUE =========
var containerClasses = classNames({
[s['text-center']]: true,
[s["hidden"]]: this.state.fadeIn != "true",
[s["fadeIn"]]: this.state.fadeIn === "true"
});
var titleClasses = classNames({
[s['blue']]: this.state.titleSelected === "true"
});
var subTitleClasses = classNames({
[s['subTitle']]: true,
[s['text-center']]: true,
[s['blue']]: this.state.subTitleSelected === "true"
});
// =========>>
return (
<div className={s["container-fluid"]}>
<div className={s["row"]}>
<div className={s["col-lg-16"]}>
<div className={containerClasses}>
<img src={heroImg} className={s["hero__img"]}></img>
<h1 onClick={() => this.handleClass("titleSelected")} className={titleClasses}>{this.props.page}!</h1>
<p className={subTitleClasses} onClick={() => this.handleClass("subTitleSelected")}>{this.props.name}, {this.props.age}, {this.props.city}</p>
</div>
</div>
</div>
</div>
);
}
}
export default GlobalHero;
I noticed there is a lot of complexity there for assigning a few simple class names to the component's elements.
I was wondering if there is a better practice for doing this? Maybe
using an external js page to manage my classnames?
Any input or adivce is appreciated... Thankyou in adnvance.

Your title mentions BEM but it looks like you are using CSS Modules, which is inspired by similar ideas but not the same thing.
Anyway, this is quite subjective but I have a few thoughts that are too much to fit in a comment:
Assuming you are using css modules through Webpack's css-loader, you can use camelCase to make your style properties more JS friendly:
loader: "css-loader?modules&camelCase"
Now for .text-center css class name you can simply use s.textCenter instead of s["test-center"].
You could componentize this better: first, you are kind of doing a lot for a single component, but you could break it down into a few smaller components that each have a single responsibility (for example container, title, subtitle). Second, your handleClass() method is doing a lot, when you could just have simple handlers that call setState() without knowing anything about class names. In other words, the component should have props and state, only the render() function deals with how to translate that into class names to render. You also really don't need to check the state's current value before setting it. Just set it to what it should be and let React optimize rendering performance for you.
You have boolean state flags that you store using strings "true" and "false"... this makes it noisy to handle, just store as booleans.
You have a lot of [s["class-name"]]: true which is not necessary; if you always want a class name to be rendered just pass it as an argument to classNames:
classNames(s.subTitle, { [s.blue]: this.state.subTitleSelected })
There's no reason to call a handler on componentDidMount, just initialize the state how you want it.
It looks like you're using bootstrap CSS but not the React Bootstrap components. I would highly recommend using React Bootstrap.
Putting that together I'd have something like:
class GlobalHero extends React.Component {
state = {
fadeIn: true,
titleSelected: false,
subTitleSelected: false
};
handleTitleClick = () => {
this.setState({titleSelected: true});
};
handleSubTitleClick = () => {
this.setState({subTitleSelected: true});
};
render() {
return (
<Grid fluid>
<Row>
<Col lg={16}>
<HeroContainer fadeIn={this.state.fadeIn}>
<HeroImage page={this.props.page} />
<HeroTitle selected={this.state.titleSelected}
onClick={this.handleTitleClick}
page={this.props.page} />
<HeroSubTitle selected={this.state.subTitleSelected}
onClick={this.handleSubTitleClick}
name={this.props.name}
age={this.props.age}
city={this.props.city} />
</HeroContainer>
</Col>
</Row>
</Grid>
);
}
}
const HeroContainer = ({fadeIn, children}) => {
return (
<div className={classNames(s.textCenter, fadeIn ? s.fadeIn : s.hidden)}>
{children}
</div>
);
};
const HeroImage = ({page}) => {
const heroImg = require(`../../../images/hero${page}.jpg`);
return (
<img src={heroImg} className={s.heroImg} />
);
};
const HeroTitle = ({onClick, selected, page}) => (
<h1 onClick={onClick} className={selected ? s.blue : null}>{page}!</h1>
);
const HeroSubTitle = ({onClick, selected, name, age, city}) => (
<p className={classNames(s.subTitle, s.textCenter, { [s.blue]: selected })} onClick={onClick}>
{name}, {age}, {city}
</p>
);
Breaking it into smaller components like this is not completely necessary, but notice how from the perspective of GlobalHero it does nothing with styles, it just sets props and state, and the little parts have no state, they just render the correct styles based on props.
PS maybe this should move to Code Reviews?

Update component when prop value changes

I have an object with the property home.ready = false. When the object is done getting data, cleaning it etc it changes to home.ready= true.
I need my component to register the change and update. My component:
class HomeNav extends React.Component {
render() {
let data = this.props.data;
let uniqueTabs = _.uniq(_.map(data, x => x.tab)).sort();
let tabs = uniqueTabs.map((tab, index) => {
let itemsByTab = _.filter(data, (x => x.tab == tab));
return <Tabs key={tab} tab={tab} index={index} data={itemsByTab} />;
});
console.log(this.props)
return (
<section>
<div className="wb-tabs">
<div className="tabpanels">
{ this.props.ready ? {tabs} : <p>Loading...</p> }
</div>
</div>
</section>
)
}
};
ReactDOM.render(
<HomeNav data={home.data.nav} ready={home.ready}/>,
document.getElementById('home-nav')
);
This is the home object. It's a simple object that gets data and once the data is ready the property ready changes from false to true. I can't get React to recognize that change. And at times React will say home is undefined.

Since you didn't post any code around the request, or data formatting, I will assume you got all that figured out. So, for your component to work the way it is currently written, you need to drop the curly braces around tabs ({ this.props.ready ? tabs : <p>Loading...</p> }), then, this.props.data should always contain a valid Array, otherwise it will break when you try to sort, filter, etc.
Or, you can do an early dropout, based on the ready property:
class HomeNav extends React.Component {
render() {
if(!this.props.ready){
return <section>
<div className="wb-tabs">
<div className="tabpanels">
<p>Loading...</p>
</div>
</div>
</section>
}
let data = this.props.data;
let uniqueTabs = _.uniq(_.map(data, x => x.tab)).sort();
let tabs = uniqueTabs.map((tab, index) => {
let itemsByTab = _.filter(data, (x => x.tab == tab));
return <Tabs key={tab} tab={tab} index={index} data={itemsByTab} />;
});
console.log(this.props)
return (
<section>
<div className="wb-tabs">
<div className="tabpanels">
{tabs}
</div>
</div>
</section>
)
}
};