Parsing error: Unexpected token React in functional component - reactjs

Question

I am learning React and getting an error while displaying values from props in a functional component. I know the syntax is wrong but don't know how to fix it.
When the same functional component was written as a class component it was working fine.But in functional component its giving syntax error.
Code:
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;
error: {const showData=props.data.map((info)=>

Answer 1

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>
);
The problem I noticed is you declare the variable in your return statement. You should instead remove it showData and using solely map function to return the desired output

Answer 2

You can try
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;