Reputation: 13
I'm trying to get a simple webpage to open up on localhost:3000, and am working with React.js - currently it appears that using React.js, it is not recognising my arrow function when I type is '=>' and I've checked with a tutorial I'm following to ensure I haven't made any typos - has anybody else encountered issues with React.js and arrow functions?
Interestingly, it works just fine in the tutorial I'm watching,
Many thanks in advance!
Rechecked code, checked App.js, googled arrow function errors in React.js
Greet.js code below:
import React from 'react'
// function Greet() {
// return <h1>Hey Henry!</h1>
// }
const Greet = props () => {
console.log(props)
return <h1>Aloha you nutter! How's it going {props.name}?</h1>}
export default Greet
App.js code below:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Hello from './components/Hello'
class App extends Component {
render() {
return (
<div className="App">
{/*<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
HELLO WORLD!!!
Henry's first React program!
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>*/}
<Greet name="Henry" />
<Greet name="Adrian" />
<Greet name="Lordi" />
{/*<Hello />*/}
</div>
);
}
}
export default App;
Expected result:
Webpage displays on localhost:3000 displaying "Aloha you nutter! How's it going {name property goes here}?" 3 times with 3 different names.
Upvotes: 0
Views: 1128
Reputation: 436
Try like this:
const Greet = (props) => {
console.log(props)
return <h1>Aloha you nutter! How's it going {props.name}?</h1>}
export default Greet
Props is params in arrow function.
Upvotes: 2