Reactでiframeを使いたい（解決済み 成功コード追記）

Question

Reactの学習をしており、コンポネントを作成したのですが想定どおりの動きをさせるために何をすれば良いのかアドバイスいただければと存じます。

想定している動き

下記のようなページで、左側の「rakuten」や「amazon」の文字列をhoverしたときに、
右側のiframe内にそれぞれのwebサイトが表示されるようにしたいです。

下記のようにコードを書いてみましたが、、

Expected an assignment or function call and instead saw an expression no-unused-expressions
というエラーになってしまいます。

import React from 'react';
import './menu.scss'

const CONTENTS_JSON = `[
    {
        "id": 1,
        "title": "amazon",
        "content":"https://www.amazon.co.jp/"
    },
    {
        "id": 2,
        "title": "rakuten",
        "content": "https://www.rakuten.co.jp/"
    },
]`;

const ShowCase = ({title, content, isOpen, onMouseOver}) => (
    <div onMouseOver={onMouseOver}>
        <p>{title}</p>
        {isOpen && <iframe class='showcase' title={title} src={content}></iframe>}
    </div>
)


class MenuNew extends React.Component {
    constructor(props){
        super(props);
        this.contents = JSON.parse(CONTENTS_JSON);
        // idを配列で持てるようにする
        this.state = {
            openIds: []
        }
        this.mouseOver = this.mouseOver.bind(this);
    }
    mouseOver(id){
        // 分割代入
        let {openIds} = this.state;
        openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
        this.setState({ openIds });
    }
    render(){
        return(
            <div className='main'>
                <div>
                    {this.contents.map(q => {
                        <ShowCase
                            key={q.id}
                            title={q.title}
                            content={q.content}
                            onMouseOver={() => {this.mouseOver(q.id)}}
                            isOpen={this.state.openIds.includes(q.id)}
                        />
                    })}
                </div>
            </div>
        );
    }
}

export default MenuNew;

想定している動きを実現させるためにはどのような方法がありますでしょうか？
アドバイスいただけますと嬉しいです。

→ 想定した動きを実現できました

新しいコンポネントを作り直してしまったので、上記のコードと大分変わってしまいましたが、
「文字列をhoverしたときに、iframe内にそれぞれのwebサイトが表示されるように」できました。
また、jsonファイルはsrc配下に別ファイルとして持たせています。

import React from 'react';
import data from './sample.json';

const Show = ({ title, url, isOpen, onMouseOver }) => (
  <div>
      <p onMouseOver={onMouseOver}>{title}</p>
      {isOpen && <iframe src={url}/>}
  </div>
);

class App extends React.Component {
  constructor(props){
    super(props);
    this.json = data;
      this.state={
        openIds: []
      }
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(id){
    let { openIds } = this.state;
    openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
    this.setState({ openIds });
  }
  render(){
    return(
      <div>
        {this.json.map(q => (
          <Show
            key={q.id}
            title={q.title}
            url={q.url}
            isOpen={this.state.openIds.includes(q.id)}
            onMouseOver={() => { this.handleChange(q.id); }}
          />
        ))}
      </div>
    )
  }
}
export default App;

[
    {
        "id": "1",
        "title": "Green RGBA model",
        "url": "http://www.flatuicolorpicker.com/green-rgba-color-model"
    },
    {
        "id": "2",
        "title": "HTML color code",
        "url": "https://html-color-codes.info/japanese/"

    }

]

出力はこんな感じです。

Answer 1

                    {this.contents.map(q => {
                        <ShowCase
                            key={q.id}
                            title={q.title}
                            content={q.content}
                            onMouseOver={() => {this.mouseOver(q.id)}}
                            isOpen={this.state.openIds.includes(q.id)}
                        />
                    })}

ここで、中括弧を使ってArrow Functionを書いているため、mapへ返す返り値がなくなっています。

returnを明記するか、q =>のあとのカッコを丸括弧にして式を返すArrow Functionにするかのどちらかです。

Comments

[lisateratail]

ありがとうございます！！　Allow functionに直したところ、`Expected an assignment or function call and instead saw an expression no-unused-expressions`エラーは出なくなりました。
ターミナルに
`<iframe> elements must have a unique title property jsx-a11y/iframe-has-title`というメッセージが出たので、ShowCase内に`title={title}`を追記しました。
```
{isOpen && <iframe class='showcase' title={title} src={content}></iframe>}
```
現在は`Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.`というエラーが出てしまっています。
`yarn create react-app`で作成したReactなのでwebpackは使ってなく、ヘルプページを見てみましたが自分ではわからなそうです。
もしエラー解消の方法を何かご存知でしたらアドバイスいただければと存じます。