Components (statess and statefull) and props

codabat — Sun, 14 Jun 2020 19:06:40 +0000

Hi everyone,
After my presentation in the dedicated section, this is my first post.
I decided to learn React as a web app development framework, along with nodejs.

Right now, I'm studying a somewhat dated book.
I got to the part dedicated to stateless and statefull components.
Well, I don't understand if the book was made worse, or why the examples refer to a somewhat dated version of React. Strange that, however, the author's GitHub code is also different from that of the book.

Below is an example of code displayed on the book:

var ReactClass = createClass ({
render: function () {
console.log (this.props.isHidden)
return React.createElement ('h1', {className: 'header'}, this.props.isHidden || true, 'React Component');
}
});

const ReaComponentElement = React.createElement (ReactClass)
consteagComponent = ReactDOM.render (reactionsComponentElement, document.getElementById ('react-application'))

But note that console.log (this.props.isHidden) is always undefined.

As you can see, the implementation is already an adaptation to what is reported in the book. The book uses React.createClass, a function that no longer exists and is no longer valid, I think, from ES6.
So I had to add the addiction:
const createClass = require ('create-react-class');
which returns the function that allows you to create a class. But console.log ('read isHidden:', this.props.isHidden) is always undefined

So I tried to transform the code like today, I think, it should be written correctly, as follows:

the ReactClass class extends React.Component {
render () {
console.log ('read isHidden:', this.props.isHidden)
if (this.props.isHidden === 'true') {
returns null;
}

 return React.createElement ('h1', {className: 'header', key: 'header'}, 'React Component')

}
}

ReactDOM.render (, document.getElementById ('react-application'))

Now console.log ('read isHidden:', this.props.isHidden) is no longer undefined, but accepts the value passed as the property of the ReactClass component ().

I don't understand what the author meant except that the rendering method can decide what to do.
But in my opinion, a component based on this.props is a stateless component. What do you think?.
Can you give me your opinion on what the author meant and if you agree on my conclusions?

Somewhere I read that the author's approach would perhaps work if the props were to pass to the constructor. Is this true?

I apologize for the stupid questions.

Thanks so much.

DEV Community: codabat

Components (statess and statefull) and props