Q: How to render a State List on one line? I have 3 files, App.js, Day.js, DayList.js and I'm trying to render the DayList all on one line.
Its set up like this:
App.js
state: [
  days: {day1, day2, day3...}
]

render() {
  return(
      <DayList />
   )}

DayList.js
props.days.map(...
    <Day />...)

Instead of App.js rendering it like:
Head
Day1
Day2
Day3

I would like it to be rendered like:
Head
Day1 Day2 Day3

But I cant figure it out for some reason...Any help?

A: One option would be to "wrap" your <Day /> components in a container that is displayed with flex-box so that the layout axis of that container's children are horizontal. 
The wrapper could be introduced into the render result of <DayList />, to cause this horizontal arrangement of the <Day/> child components. 
So for example, by adding the following CSS and JSX to your project you could achieve the desired result:
CSS
.horizontal-layout {
    display:flex;
    flex-direction:row;
}

DayList.js
render() {

    const props = /* ... from somewhere in your code ... */

    /* 
    Cause the "Day" children of "DayList" to be wrapped in a container styled
    with flex-box that produces a horizontal layout
    */
    return <div className="horizontal-layout">{ props.days.map(() => <Day />)</div>
}


A: It is more of a styling job. Give your div className='horizontal-layout' and you can do something like this.
.horizontal-layout {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

