What is a useless Constructor in React? - reactjs

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

Answer 1

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'

Answer 2

#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;