React read string as component - reactjs

Question

I'm using bootstrap framework to render a simple 3 column grid layout out of some content on a page. Where it gets complicated, I'm trying to conditionally render bootstrap <Row> or </Row> depending on where we are in the loop - for instance ,render a <Row> if index % 3 == 0 and render a </Row> if (index + 1) % 3 == 0. Because there are problems with conditional rendering in map, I've come up with the following approach which would work if there was a way to read a string as a React component. Does anyone know how to do this?
const websiteData = [
{
name: "abcdefg",
url: "https://www.abcedfg.com/",
categories: ["react"],
thumbnail: require("./assets/images/image.png"),
},
{
name: "rrrrrr",
url: "https://www.rrrrrr.com/",
categories: ["wordpress"],
thumbnail: require("./assets/images/rrrrrr.png"),
},
{
name: "jjjjjjjj",
url: "https://www.jjjjjjjj.com/",
categories: ["wordpress"],
thumbnail: require("./assets/images/jjjjjjjj.png"),
},
{
name: "ffffff",
url: "https://www.ffffff.com/",
categories: ["wordpress"],
thumbnail: require("./assets/images/ffffff.png"),
},
{
name: "dddddd",
url: "https://www.dddddd.com/",
categories: ["wordpress"],
thumbnail: require("./assets/images/dddddd.png"),
},
{
name: "adadads",
url: "https://www.adadads.com/",
categories: ["wordpress"],
thumbnail: require("./assets/images/adadads.png"),
},
];
const RowOpen = (props) => {
const { index } = props;
if (index % 3 == 0) {
return "<Row>";
} else {
return <span />;
}
};
const RowClose = (props) => {
const { index } = props;
if (index + (1 % 3) == 0) {
return "</Row>";
} else {
return <span />;
}
};
const Websites = () => {
return websiteData.map((site, index) => {
return (
<React.Fragment>
<RowOpen index={index} />
<Col md="4">
<a>
<img style={{ maxWidth: "100%" }} src={site.thumbnail} />
</a>
</Col>
<RowClose index={index} />
</React.Fragment>
);
});
};
Ultimately I want to loop through websiteData and wind up with something like this:
<Row>
<Col md=4">
...
</Col>
<Col md=4">
...
</Col>
<Col md=4">
...
</Col>
</Row>
<Row>
<Col md=4">
...
</Col>
<Col md=4">
...
</Col>
<Col md=4">
...
</Col>
</Row>

Answer 1

You have <RowOpen index={index} />...<RowClose index={index} />, and then these are defined as returning "<Row>" and "</Row>". To be clear, these are strings, and will display as plain text, and not as components. You cannot define components like this in ReactJS. You must define them like so...
var component = <Row />;
Just try it with your approach in an a sandbox online:
Expected corresponding JSX closing tag for
Do this instead: Make a display function for each row...
const Websites = () => {
return (
websiteData.map((site, index) => {
return (
<React.Fragment>
{RowDisplay(site, index)}
</React.Fragment>
)
})
)
}
And then have your RowDisplay() function display either either <Row>'s or <span>'s...
const RowDisplay = (site, index) => {
if (index + 1 % 3 == 0) {
return RowDisplayRow(site, index);
} else {
return RowDisplaySpan(site, index);
}
}
Then you just need the final Row/Span display functions...
const RowDisplayRow = (site, index) => {
return (
<Row index={index}>
<Col md="4">
<a>
<img style={{ maxWidth: '100%' }} src={site.thumbnail} />
</a>
</Col>
</Row index={index}>
);
}
const RowDisplaySpan = (site, index) => {
return (
<Row index={index}>
<Col md="4">
<a>
<img style={{ maxWidth: '100%' }} src={site.thumbnail} />
</a>
</Col>
</Row index={index}>
);
}
I have done this all in sudo-code, but, I think you'll probably get the idea I'm trying to demonstrate. Explanation is sometimes much more important than just code!

Answer 2

You just simply put the conditions in the map like
return (
websiteData.map((site, index) => {
return (
<React.Fragment>
{index % 3 == 0 ? <Row /> : <span />}
<Col md="4">
<a>
<img style={{ maxWidth: '100%' }} src={site.thumbnail} />
</a>
</Col>
{index + 1 % 3 == 0 ? </Row> : <span /> }
</React.Fragment>
)
})
)
Try this You will get your desired output ! It will help
Simple and best approach ! :)