Ошибка синтаксического анализа: неожиданный токен React в функциональном компоненте

Question

Я изучаю React и получаю сообщение об ошибке при отображении значений из реквизита в функциональном компоненте.Я знаю, что синтаксис неправильный, но не знаю, как это исправить.Когда тот же функциональный компонент был написан как компонент класса, он работал нормально. Но в функциональном компоненте была ошибка синтаксиса.Код:

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)=>

Answer 1

Вы можете попробовать

const Crypto = (props) => {
    return (
        <div className="row">
                {props.data.map((info) => (
                <ul className="list-group">  // if you are using map better to use index
                    <h3>Name {info.name}</h3>
                    <li className="list-group-item">Value: {info.value}</li>
                </ul>
                ))}

        </div>
    )
};

export default Crypto;

Answer 2

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

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

Проблема, которую я заметил, заключается в том, что вы объявляете переменную в своем выражении return. Вместо этого вы должны удалить его showData и использовать только функцию map, чтобы вернуть желаемый результат