There’s a problem: talk is defined outside of the Talker component class. That’s not how we do things here in React-land!
Rewrite talk , so that it is a method defined in the definition of Talker
//button.js - defining Button component to be exported
import React from 'react';
export class Button extends React.Component {
render() {
return (
<button onClick={this.props.talk}>
Click me!
</button>
);
}
}
//talker.js - defining talker() function, Talker component and importing Button component
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';
function
class Talker extends React.Component {
talk() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
};
render() {
return <Button talk={this.talk} />;
}
};
ReactDOM.render(
<Talker />,
document.getElementById('app')
);
However I don’t understand what is the reason why we should have the function talk() inside the Talker component.
What does the sentence “That’s not how we do things here in React-land!” mean exactly?
Personally I would have kept separated the logic of the talk() function and the Talker component, writing the talker.js file this way:
//talker.js - defining talker() function, Talker component and importing Button component
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from './Button';
function talk() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
};
class Talker extends React.Component {
render() {
return <Button talk={talk} />;
}
};
ReactDOM.render(
<Talker />,
document.getElementById('app')
);
Is there a reason why the function talk() should be defined inside the class Talker, other than inheritance?
What is the advantage to have this function be inheritable by Talker instances?
For anyone interested:
the reason why we put talk() inside the Talker class Component instead of keeping it outside in the global scope of the file Talker.js is because one of the main uses of Components is to be modular, thus Talker is likely to be exported to be used somewhere else, but if we export Talker then the reference to the function talk() would be lost, unless it is also exported separately.
However it could also be speculated that keeping the function talk() separated from Talker would be just like a separation of concerns: Functional and Presentational respectively, talk() could be converted to a Component and live in a separate file (talkerContainer.js) and be a Container for Talker.
In this case Talker would be exported and then imported by talkerContainer.js and used there.
However, I like @moisesrj7160057532 and others have no idea why we can’t put a semicolon or comma to separate the methods, talk( ) and render ( ) from inside the component. Do you perhaps know why?
Thank you for the appreciation. Sure, the reason is similar to the answer to teemu9 in this thread.
First: It’s not something specific to React Components. The declaration of a Javascript Class follows a similar syntax to that of Objects, but still differs in some things, as for Objects: each key is separated with a comma, in a Class body doing this would throw a SyntaxError.
Some examples:
This Class is written with the correct syntax and creating a new instance gives back some info:
This Class is written using the same syntax for Objects, using a comma, it throws an immediate error:
This Class is written using the common syntax of separating code blocks with a semicolon, interestingly enough it is accepted and creating a new instance gives us some info:
Ignore the const declaration of mariaHobby, as I used the first class Hobby, instead of the second one Hobbyt.
You’re welcome. I would get used however to not use semicolons all together inside a Class though.
I did and it is a good reminder I’m inside a Class and not somewhere else in the code.
First, I tried to move the entire Talk function into the Talker class, including “function” at the beginning. That threw an error. Removing “Function” solved it. Why is that?
) below!
) to up-vote the contribution!
