React not able to render an array(state) in a single row - reactjs

Question

The state
state = {
posts: [],
}
The posts gets an API value of
{
"authors": [
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
....
]
}
code
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) :
(
<div className="center">No posts to show</div>
);
return(
{postList}
)
}
The {postlist} returns objects but it returns each object in a new row in the webpage
I want all the results(images) in the same row
can anyone please help?

Answer 1

If you want multiple elements in the same row, you could achieve that with css. Use display: flex(by default flex-direction is row which is what you need) on the wrapper to postList. You can either pass it as a style though JSX or add a class that specifies this property
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
return(
<div style={{display: 'flex'}}>{postList}</div>
)
}

Answer 2

Here's a CodeSandbox sample I created using your code.
If you're trying to line up the users horizontally (from left to right), CSS is the way to go. In particular, the <div> that is being mapped has, by default, the display: block style which makes it occupy its own row in the page.
To line up divs side by side, you need to somehow apply the display: inline-block style. In my example I used a style prop, but you will likely want to do it in CSS directly.

Answer 3

This is a CSS problem, you should use display: flex together with flex-direction: row on the parent div which will provide the desired result.

Answer 4

posts.map(post,index => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authors[index].authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
Try this