How to add Element between react children with Some condition? - reactjs

Question

I need to add element between each children when some props values satisfied
how to do that
"only add element if the prop value is space is true"
now i did like this
const style={
height:"10px"
}
if(this.props.space){
style.width=30;
}
render(){
return(
{React.Children.map(children, (child, i) => {
return (
<React.Fragment>
<span style={style}></span>
<React.Fragment>{child}</React.Fragment>
</React.Fragment>
);
})}
)
}

Answer 1

So is it the span you only want if space is true?
Then you could do something like this
{React.Children.map(children, (child, i) => {
return (
<React.Fragment>
{this.props.space && <span style={style}></span>}
<React.Fragment>{child}</React.Fragment>
</React.Fragment>
);
})}
The concept is explained here https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
It works because true && expression will evaluate to expression, and false && expression will evaluate to false.

Answer 2

Span is an inline element and doens't take width and height. You can instead return a div element conditionally and and align the child and the div element horizontally like
function App({ children, space }) {
const style = {
height: "10px",
width: "30px",
backgroundColor: "red",
display: "inlin"
};
return (
<React.Fragment>
{React.Children.map(children, (child, i) => {
return (
<React.Fragment>
<div style={{ display: "flex" }}>
{space ? <div style={style} /> : null}
<div>{child}</div>
</div>
</React.Fragment>
);
})}
</React.Fragment>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App space>
<div>Hello</div>
</App>,
rootElement
);
Working demo
However conditionally adding an element to provide space to the left doesn't seem to be a good idea. You can instead add class and add property like margin-left or add a style
return (
<React.Fragment>
{React.Children.map(children, (child, i) => {
return (
<React.Fragment>
<div style={{marginLeft: '30px'}}>{child}</div>
</React.Fragment>
);
})}
</React.Fragment>
);