Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Tuesday, April 22

    Why we write super(props) in React class based component?

    JavaScript 1,006 Comments2 Mins ReadSaurabh NaharBy

    If you are coming from languages like Java or maybe C++, then you would be familiar with classes and OOP concepts. To make JavaScript more approachable for developers with such backgrounds, ‘class’ was introduced in ES6. A class in JavaScript is essentially syntactic sugar on top of constructor functions or prototypes, which is how classes were previously created in JavaScript. If all of this sounds unfamiliar, let me explain with an example.

    Imagine you wanted to create a bunch of objects, and each object must have properties like name, email, roll number, and a method (function) that lets students give attendance. Would you create the following object 100 times for all the students with the same properties and methods? No, right? Remember the DRY (Don’t Repeat Yourself) principle?

    Object creation in JavaScript

    To avoid writing the same code 100 times, you can create a class that will serve as a blueprint for all future objects.

    Class creation in JavaScript

    Now imagine there is a class monitor who has the same properties and methods as students, but in addition, this person has the function to mark someone absent.

    Inheritance in JavaScript

    This is called inheritance, where Monitor inherits the properties of Student but also has its own method, markAbsent. In this case, JavaScript automatically calls the constructor function of the parent class and passes the values from Monitor to the Student class to create an instance, then adds its own method, markAbsent. But behind the scenes it is doing the below to achieve this.

    In React, when you create a class-based component, you extend the predefined class React.Component and write constructor(props) and super(props) to properly initialize this.props and this.state in the component. This is especially important for dealing with the component’s lifecycle and rendering.

    Class based component in React

    By calling super(props), you ensure that the parent class (React.Component) performs its necessary initializations, allowing your component to function correctly within the React framework. This is crucial for accessing this.props and setting up the component’s initial state based on the props.

    Keep Reading

    View 1,006 Comments

    1,006 Comments

    7. xhamster porn on

      Hello! I could have sworn I’ve been to this blog before but after going through many of the articles I realized it’s new to me.Regardless, I’m certainly delighted I found it and I’ll be book-marking itand checking back regularly!

      Reply
    19. hack like Facebook on

      Hi there, just became aware of your blog through Google, and found that it’s really informative.I am gonna watch out for brussels. I willappreciate if you continue this in future. A lot of people will be benefited from your writing.Cheers!

      Reply
    25. binance on

      Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

      Reply
    100. 3D Hoodie on

      Heya i’m for the first time here. I found this board and I to find It truly useful & it helped me out much. I am hoping to offer one thing again and aid others such as you helped me.

      Reply
    135. 印傳單 on

      Pretty nice post. I just stumbled upon your blog and wanted to say thatI have truly enjoyed surfing around your blog posts.In any case I will be subscribing to your rss feed and I hope you write again soon!

      Reply
    513. Plinko on

      I must say this information was very interesting. I stumbled onto you using a google search and was rather thankful for your rank for this article.

      Reply
    515. laptop cu gia re on

      Thanks for finally writing about >ザンビア孤児院 – なぜそこに日本人？（TV）に出た桜子さん、ザンビア孤児院より九州に、乞うご期待、集まれ！！

      Reply
    539. Mua view on

      Thank you for any other informative blog. Where else mayjust I get that kind of information written in such an ideal approach?I’ve a venture that I’m just now working on, and I’ve been at the look outfor such info.

      Reply
    587. Jessevox on

      Играйте РїРѕ СЃРІРѕРёРј правилам РЅР° автомате.: balloon игра – balloon казино играть

      Reply
    589. Josephtex on

      Автомат Ballon — идеальный СЃРїРѕСЃРѕР± расслабиться.: balloon game – balloon game

      Reply
    595. https://t.co/AEhOSpg2HM on

      Oh my goodness! Impressive article dude! Thanks, However I am encountering problems with your RSS. I donít know why I cannot join it. Is there anyone else getting the same RSS issues? Anybody who knows the solution will you kindly respond? Thanks!!

      Reply
    610. Davidboype on

      balloon казино демо [url=https://akhbutina.kz/#]balloon game[/url] Сыграйте РЅР° деньги, почувствуйте азарт!

      Reply
    611. SciatiSoothe on

      Thanks for the auspicious writeup. It in fact used to be a leisure account it. Look complicated to more delivered agreeable from you! By the way, how can we keep in touch?

      Reply
    612. Martyhap on

      Игровой автомат — это развлечение Рё шанс.: balloon казино – balloon казино официальный сайт

      Reply
    613. Josephtex on

      Ballon — это РёРіСЂР° СЃ удивительными графиками.: balloon game – balloon казино

      Reply
    615. Mitolyn on

      Hey There. I found your blog using msn. This is a really well written article. I’ll make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll certainly comeback.

      Reply
    619. click here on

      Great awesome issues here. I¡¦m very happy to peer your article. Thank you so much and i am looking ahead to contact you. Will you please drop me a e-mail?

      Reply
    689. linebet on

      An intriguing discussion is worth comment. I think that you should publish more on this topic, it might not be a taboo matter but typically folks don’t speak about such issues. To the next! Kind regards!!

      Reply
    694. for additional information on

      Hey there are using WordPress for your blog platform? I’mnew to the blog world but I’m trying to get started and create my own. Do you needany coding knowledge to make your own blog? Any help would be really appreciated!

      Reply
    709. done-for-you guided meditation scripts on

      ผมชื่นชอบเล่นกับ UFABET ระบบเยี่ยม ชอบใจสุดน่าจะเป็นระบบฝากถอนแบบอัตโนมัติ ไม่มีขั้นต่ำ เพราะคราวที่แล้วผมเคยเล่นเว็บอื่นเวลาฝากก็ควรต้องแจ้งบุคลากรตอนถอนก็ต้องแจ้งพนักงาน ถ่วงเวลาเสียอารมณ์ จริงๆครับ

      Reply
    757. slot dana on

      Hi, I do believe this is an excellent blog. I stumbledupon it 😉 I’m going to return once again since i have saved as a favorite it. Money and freedom is the best way to change, may you be rich and continue to guide others.

      Reply
    848. Dien Lanh HK on

      Thanks for the auspicious writeup. It in truth was once a enjoyment account it. Look advanced to far brought agreeable from you! By the way, how can we keep up a correspondence?

      Reply
    935. game on

      I am actually glad to glance at this blog posts which includes lots of valuable information, thanks for providing such information.

      Reply
    954. f168 on

      Aw, this was a really nice post. Taking the time and actual effort to generate a top notch articleÖ but what can I sayÖ I put things off a lot and never seem to get anything done.

      Reply
    977. f168 on

      Hi my friend! I wish to say that this article is amazing, great written and include almost all significant infos. I’d like to peer more posts like this .

      Reply
    984. сервисные центры москвы on

      Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
      Мы предлагаем:сервисные центры по ремонту техники в мск
      Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us