I have to align components rendered using a map function horizontally as its default align vertically.
Here's my component:
<Table.Cell>
{[...Array(this.props.numPages)].map((e, i) => (
<Typography customLink onClick={() => this.handlePageClick(i + 1)} key={'key'.concat(i)} className='pages'>
{i + 1}
</Typography>
))}
</Table.Cell>
Here Typography is the component which have to be rendered as page numbers but its getting rendered vertically.
Here's the css I used:
.pages{
display: flex;
flex-direction: horizontal;
}
Any help will be appreciated.
It's the wrapper who need to be flex, and flex direction horizontal do not exists...
Try with this maybe :
<Table.Cell>
<div style={{display:'flex', flexDirection:'row'}}>
{[...Array(this.props.numPages)].map((e, i) => (
<Typography customLink onClick={() => this.handlePageClick(i + 1)} key={'key'.concat(i)} className='pages'>
{i + 1}
</Typography>
))}
</div>
</Table.Cell>