CODEWITHSUNDEEP
reactjs
Abhilekh Gautam
Abhilekh Gautam

Reputation: 655

What is a useless Constructor in React?

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

Upvotes: 1

Views: 10527

Answers (2)

ckifer
ckifer

Reputation: 284

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

Upvotes: 4

CertainPerformance
CertainPerformance

Reputation: 370769

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'

Upvotes: 15

Related Questions