解析错误：功能组件中出现意外的令牌反应

Question

我正在学习React并在显示功能组件中props的值时遇到错误。我知道语法错误，但不知道如何解决。 当将相同的功能组件作为类组件编写时，它可以正常工作，但是在功能组件中，它给出了语法错误。 代码：

App.js：

import React, { Component } from 'react';
import './App.css';
import Crypto from './Component/Crypto';
class App extends Component {
  constructor(){
    super();
    this.state={
        data: [
            {
                name:'Bitcoin',
                id:1,
                value:'2000'
            },
            {
                name:'Ripple',
                id:2,
                value:'60'
            },
            {
                name:'Etherium',
                id:3,
                value:'250'
            }
        ]
    }
}
  render() {
    return (
      <div className="App">
        <Crypto data={this.state.data}/>
      </div>
    );
  }
}


export default App;

Crypto.js

import React from 'react';

const Crypto=(props)=> {

    return (
        <div className="App">
      {const showData=props.data.map((info)=>
          return (
            <div key={info.id}>
            <h3>{info.name}</h3>
            <h2>${info.value}</h2>
            </div>
          )
      )}
        {showData}
      </div>
    );
  }


export default Crypto;

错误：{const showData=props.data.map((info)=>