What is a useless Constructor in React?

Question

I have two files

Description.js and subjects.js

Subject.js file contains an array of subjects

export const Subjects=[ { id:1, title:"Mathematics", text:"Cheat Sheet for Mathematics", img:"./Images/math.jpg", }, { id:2, title:"C-programming", text:"Cheat Sheet for C-Programming", img:"./Images/cprog.jpg", }, { id:3, title:"Physics", text:"Cheat Sheet for Physics", img:"./Images/physics.jpg", }, { id:4, title:"Youtube", text:"Recomended Youtube videos for Learning", img:"./Images/youtube.jpg", }, ]

I want to use this array in Description.js .I'm using a map function

import React, { Component } from 'react'; import {Subjects} from './subjects' class Description extends Component{ constructor(props){ super(props); } render(){ const description =this.props.Subjects.map((subjects)=>{ return( <h1>{subjects.title}</h1> ) }) return( {description} ) } } export default Description;

But I am recieving an error of

TypeError: Cannot read property 'map' of undefined

Also in my vs code terminal.I have these mentioned

Line 2:9: 'Subjects' is defined but never used no-unused-vars Line 5:5: Useless constructor no-useless-constructor

CertainPerformance · Accepted Answer · 2021-11-29 13:57:03Z

A "useless constructor" is one that the linter is warning you can safely remove from the code, because it doesn't accomplish anything - if all you have is a super call (with the same argument the class is created with), the constructor doesn't do anything useful, because classes will already call super automatically, if the constructor isn't given:

class Parent { constructor(name) { console.log('parent constructor running', name); } } class Child extends Parent {} const c = new Child('bob');

So, the linter is telling you to delete the following lines:

constructor(props){ super(props); }

Since the Subjects identifier isn't being used anywhere, it can be removed too. Delete the line:

import {Subjects} from './subjects'

Where? You aren't referencing the import anywhere in your code. If you do actually want to reference it somewhere, then you'll need to tweak your code.
Yes, you're importing it - that's the problem, you aren't using the import anywhere.
@AbhilekhGautam you map your array and return your components but that last line is invalid because React can't put those h1 tags into an object and then render it. it needs to be in an HTML element or React component.

ckifer · Accepted Answer · 2021-12-02 22:10:11Z

@CertainPerformance answers what a useless constructor is well: basically an ESLint rule that doesn't allow you to have constructors that do nothing.

This should work for what you want to happen, though if this is the extent of the component I would place it in a functional component. In order to use this Subject array as a prop you'd have to import it in another component and pass to Description like <Description subjects={Subjects} />

import React, { Component } from 'react'; import { Subjects } from './subjects'; class Description extends Component { render() { const description = Subjects.map(subjects => { return <h1>{subjects.title}</h1>; }); return <div>{description}</div>; } } export default Description;

Or as a functional component:

import React from 'react'; import { Subjects } from './subjects'; const Description = () => { const description = Subjects.map(subjects => { return <h1>{subjects.title}</h1>; }); return <div>{description}</div>; }; export default Description;

Collectives™ on Stack Overflow

What is a useless Constructor in React?

2 Answers 2

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Linked

Related