React で縦2列の表現がしたいです

Question

React で縦2列の表現がしたいです

Reactを使って横2列の表示をしようとしてるのですが、うまくいきません。
Apple
Orange
Banana
Mango
桜
Apple
Orange
Banana
Mango
桜

現状ではこの様になっています。

縦2列での表現が出来ません。

該当のソースコード

import React, { Component } from 'react'
import './App.css'

import request from 'superagent'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      items: null
    }
  }
  componentWillMount () {
    request.get('./fruits.json')
      .accept('application/json')
      .end((err, res) => {
        this.loadedJSON(err, res)
      })
  }
  loadedJSON (err, res) {
    if (err) {
      console.log('JSON読み込みエラー')
      return
    }
    this.setState({
      items: res.body
    })
  }
  render () {
    if (!this.state.items) {
      return <div className='App'>
        現在読み込み中</div>
    }
    var i = 0
    const list = this.state.items.map(e => {
      i++
      if (i > 5) {
        return <p className='right'>{e.name}</p>
      } else {
        return <p className='left'>{e.name}</p>
      }
    })
    return (
      <div className='App'>
        {list}
      </div>
    )
  }
}

export default App

.left{
  margin: 0;
  text-align: left;
  list-style: none;
  width:48%;
}

.right{
  background-color: #ffd;
  margin: 0;
  text-align: right;
  list-style: none;
  width:48%;
}

[
  {"name": "Apple"},
  {"name": "Orange"},
  {"name": "Banana"},
  {"name": "Mango"},
  {"name": "桜"},
  {"name": "Apple"},
  {"name": "Orange"},
  {"name": "Banana"},
  {"name": "Mango"},
  {"name": "桜"}
]

出力としてはこのようにしたいです、
Apple Apple
Orange Orange
Banana Banana
Mango Mango
桜 桜

Comments

[keisukeh]

どの部分がうまく行ってませんか？ カウントアップのiの値がうまく設定できない？ クラス名がつかない？ そもそもエラーになる？ 吐き出されたHTMLが思い通りにならない？ もうすこし情報があれば回答しやすいと思います。

[退会済みユーザー]

吐き出されたHTMLが思い通りになりません。

[keisukeh]

吐き出されたHTMLを追記していただくことは出来ますか？他の部分に関しては想定した動きになってますか？

[退会済みユーザー]

吐き出されたHTMLはApple Orange Banana Mango 桜 Apple Orange Banana Mango 桜　のようになっています

[退会済みユーザー]

すみません、全て縦に表示されてしまいます。

[退会済みユーザー]

全て一列に表示されてします

[keisukeh]

class="left",class="right"がついた状態で縦一列に並んでるならReact側は問題ないと思うので後はCSSの問題じゃないでしょうか

[退会済みユーザー]

css 情報を追加しました。どのようにすれば思い通りに出力出来ますか。

[退会済みユーザー]

ありがとうございました。

Answer 1

"display: inline-block;"を指定すれば横並びになりますが、それだけだとうまく表示されないと思います。
jsの方にも修正が必要かと。

//...省略
var i = 0
var leftList = [];
var rightList = [];

this.state.items.map(e => {
  i++
  if (i > 5) {
    rightList.add(<p>{e.name}</p>);
  } else {
    leftList.add(<p>{e.name}</p>);
  }
})

return (
  <div className='App'>
    <div className='left'>{leftList}</div>
    <div className='right'>{rightList}</div>
  </div>
)
//...省略

.left{
  margin: 0;
  text-align: left;
  list-style: none;
  width:48%;
  display: inline-block;
}

.right{
  background-color: #ffd;
  margin: 0;
  text-align: right;
  list-style: none;
  width:48%;
  display: inline-block;
}

Comments

[og24715]

Array.prototype.map は コールバックに value, index array を与えるので、外にカウンター変数 i を持たずに index を使えば同等のことが出来ます。更にいうと .map は配列をもとに配列を作るメソッドなので .map の返り値が不要であれば .forEach を使用したほうが適切です。あと js の Array オブジェクトに .add メソッドは無いです。多分意図してるのは .push です

[退会済みユーザー]

ありがとうございます。皆さんの知恵を元にアプリを改良したいと思います。

[nekoniki]

og24715様
ご指摘ありがとうございます。
仰る通りです。拙い回答に丁寧な補足をいただき非常に勉強になりました。