horizontally align a list of components in react.js-CodePudding

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>