Reputation: 49
I have components that when viewed in my app are positioned vertically and I would like this to be horizontally. Which component should I apply the css property to and what would it be?
Thank you
Principal Component
import React from 'react'
import Tournament from './Card.jsx'
import Tournaments from './ListTournaments.jsx'
import Carousel from './Carousel.jsx'
import '../resources/styles/grid.css'
import Header from './Header.jsx'
import Modal from './Modal.jsx'
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
const App = () => (
<div>
<Header />
<Switch>
<Route
exact path="/"
>
<Carousel/>
</Route>
<Route
path = "/tournaments"
>
<Tournaments/>
</Route>
</Switch>
</div >
)
export default App
components that are displayed vertically
import React from 'react';
import Tournament from './Card.jsx'
var tournaments = require('../resources/data/tournament.json')
export default function ListTournaments(props) {
return (
tournaments.map((
tournament,index )=>
<Tournament
title={tournament.title}
description={tournament.description}
requierements={tournament.requierements}
date={tournament.date}
img={tournament.img}
key = {index}
/>
)
)
}
Upvotes: 0
Views: 924
Reputation: 1110
You could wrap the items of the ListTournaments component into a div and make it a flexbox via css.
=> Return this from ListTournaments
return (
<div className="tournaments-list">
tournaments.map((
tournament,index )=>
<Tournament
title={tournament.title}
description={tournament.description}
requierements={tournament.requierements}
date={tournament.date}
img={tournament.img}
key = {index}
/>
)
</div>
)
Add this css (or similar e.g. grid)
.tournaments-list{
display: "flex";
}
Upvotes: 1