We Keep Coding

react nesting 3 components opening and closing tag where when the element inside the tag isnt rendered

I found a similar question here: React component closing tag
but i am still confuse...
why when I do this it doesnt work? innertherinner doesnt get rendered.
function Outer(props) {
return (
<Inner>
<InnerTheInner />
</Inner>
)
}
function Inner(props) {
return (
<>
</>
)
}
function InnerTheInner() {
return (
<>
innertheinner
</>
)
}
ReactDOM.render(
<React.StrictMode>
<Outer user='nishi' avatar='avatar photo' />
</React.StrictMode>,
document.getElementById('root')
);
isnt it equivalent to this:
<Outer>
<Inner>
<InnerTheInner>
InnerTheInner
</InnerTheInner>
</Inner>
</Outer>

You need
function Inner(props) {
return <>{props.children}</>;
}
else it would just render always
return (
<>
</>
)
Checkout https://reactjs.org/docs/composition-vs-inheritance.html

In fact you're rendering an empty Fragment using Inner component - without any child nodes. React components do not render its children inside unless you tell them to do so explicitly:
function Inner(props) {
return (
<>
{props.children}
</>
)
}
That way, every component that is passed inside the <Inner> will be rendered (as it's a part of the children prop).
Also you can simplify it, as there's no need to use Fragment at all, just return props.children and you're good to go.
function Inner(props) {
return props.children
}

How to render several div in render with a function inside

I can't figure this out, I tried to use in render but still failed, how to fix this problem?
render() {
return (
{
<div className="ABC">
<a>ABC</a>
</div>
<div className="DEF">
}
{*Some function create inner html content*}
{
</div>
}
I tried to add tag but it seems like still got the error...

The render method can only return a single root node. You can either wrap everything in a single element (such as a <div>), or use react fragments
A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
You will also see the above written in short Syntax as:
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}

You need to have a single closing element for JSX. This might help :
function bar(){
return (
<div>
Some other content
</div>
);
function foo(){
return (
<React.Fragment>
<div>
Some Content in here
{ bar() }
</div
</React.Fragment>
);
render(){
return(
{ foo() }
)
}

You will have to use a single div tag. You can do this by
function foo(){
return (
<div> New content here </div>
);
render(){
return(
<div className="ABC">
<a>ABC</a>
{ foo() }
</div>
)
}

React returning Error decoder message message

I am trying to create very simple multistep form using react. My main component which is handling state for steps looks like this:
...
renderStepItem = () => {
switch(this.state.step) {
case 1:
return <ImportStep nextStep={this.nextStep} />
case 2:
return <ImportStep previousStep={this.previousStep} nextStep={this.nextStep} />
case 3:
return <ImportStep previousStep={this.previousStep} />
}
}
...
This is switch which should return Component that should be rendered based on step state
Then render:
render() {
return(
{this.renderStepItem()}
)
}
The problem is that i am getting following error message:
Error
Objects are not valid as a React child (found: object with keys {nextStep}).
I was trying to go through some tuts etc to solve it. But i am guessing that i am passing something that i am unable to do.
Can anybody give me some hint please?
UPDATE:
render() {
const importSteps = AppConfig.importSteps;
return (
<Block extend={{
width: '80%',
margin: '25px auto'
}}>
<TabNav extend={{
border: '1px solid black',
}}
textAlign='center'>
{Object.keys(importSteps).map(function(key) {
return <TabNavItem >{importSteps[key].name} {importSteps[key].stepNo}</TabNavItem>;
}
)}
</TabNav>
<div>{ this.renderStepItem() }</div>
</Block>
)
}
}
UPDATE2: ImportItem component
import React, { Component } from 'react';
import { Block } from 'vcc-ui';
class ImportStep extends Component {
render() {
return (
<Block>
<h3>{this.props}</h3>
</Block>
)
}
}
export default ImportStep;

UPDATE
Use this.props.property in the render function. You can not use an object there in the ImportStep component.
Also, wrapping inside a <div> would be necessary when you have only one statement inside the return.
Wrap your this.renderStepItem() inside a <div></div>, and that should do.
Here is what your return statement should look like,
return (
<div>{ this.renderStepItem() }</div>
)
See this example: https://codesandbox.io/s/q35699jj49

Calling Multiple component in same page in React.js

I am creating a react main page which is rendering two react component as
render() {
return (
<Header />
<Test />
);
}
Header is having simple static content.In Test I am calling external api using redux on page page load as
componentWillMount() {
if (this.props.onPageLoadTest) {
this.props.onPageLoadTest();
}
}
render() {
const { data } = this.props;
return (
<div>
{
data.map((a) => (
<div key={a.id}>{a.id}
</div>
))
}
</div>
);
}
Using props I am showing content in Test component.Header and Test are working fine when I am rendering them separately.
When I am trying to combine then only Header is showing but Test is not able to fetch data from API.

You can't do things like this:
render() {
return (
<Header />
<Test />
);
}
there can be only one markup in the return of render()
if you want to render the Header and Test together here, you have to wrap them with one markup,like this:
render() {
return (
<div>
<Header />
<Test />
</div>
);
}

Using jQuery inside of a React render function

I have the following React render function:
render: function () {
return (
<Popup onClose={this.props.onClose}>
<Form entity="strategy" edit="/strategies/edit/" add="/strategies/add/">
<h2>Create/Edit Strategy</h2>
<StrategyForm pending={this.state.pending} formData={this.state.data} />
<div className="col-md-6">
<Assisting />
</div>
</Form>
</Popup>
);
}
I would like to make the h2 heading be based on the body class, so my question is...can I do this?
render: function () {
return (
<Popup onClose={this.props.onClose}>
<Form entity="strategy" edit="/strategies/edit/" add="/strategies/add/">
if ( $('body').hasClass("this") ) {
<h2>Create This Strategy</h2>
} else {
<h2>Create Another Strategy</h2>
}
<StrategyForm pending={this.state.pending} formData={this.state.data} />
<div className="col-md-6">
<Assisting />
</div>
</Form>
</Popup>
);
}
If this is a terrible idea, can someone tell me what is a better way to do this in React?

As has already been noted in some of the comments on the OP, you could do it, but it's not really the "React" way.
A better solution would probably be to pass a prop into the usage of your component or have a flag on the state of your component -- then use that prop/flag to render.
Pseudocode:
render() {
return (
if (this.props.someProp) {
<h2>Create this Strategy</h2>
} else {
<h2>Create this Strategy</h2>
}
);
}
IMO using jQuery in the component methods is fine (e.g. componentDidMount(), or other event/utility methods) but usually you'll want to avoid this in render(). The whole purpose of React components is maintaining state, so on-the-fly usage of jQuery like your example defeats that idea.
Let's say for example you're rendering your component this way:
ReactDOM.render(<MyComponent />, document.getElementById('some-div'));
You can pass properties to your component:
ReactDOM.render(
<MyComponent someProp={true} />,
document.getElementById('some-div')
);
Or in your case:
ReactDOM.render(
<MyComponent someProp={$('body').hasClass("this")} />,
document.getElementById('some-div')
);
...something like that. It's an over-simplified example (not tested, so beware syntax errors) but that should help explain my thought process.
Alternatively, you use the componentDidMount() method on your class.
componentDidMount() {
this.setState({
someProp : $('body').hasClass("this")
});
}
and then in render() check against this.state.someProp.