CODEWITHSUNDEEP
javascriptreactjs
Mubean Hussain
Mubean Hussain

Reputation: 25

Simply return a value from another component

Wondering if you guys can help. I am trying to create a generic component which when called, will return a value.

The code currently stands as follows:

import React, {Component} from 'react'

class Clients extends Component {
   render () {
      var userEnum = {
      SMALL: 1,
      MEDIUM: 2,
      LARGE: 3,
      properties: {
        1: {name: "Admin", value: 1},
        2: {name: "Manager", value: 2},
        3: {name: "Standard", value: 3}
      }
    };

    const clientName = (value) => {
      return userEnum.properties[value].name
    }
    return null
  }
}

export default Clients

and in another component, I try calling the clientName function (done an import too).

import ClientHelper from '../../helpers/clients'

    ...
      const test =  ClientHelper.clientName(2)
      console.log(test)

I should expect a return value of 'Manager' but I get

TypeError: WEBPACK_IMPORTED_MODULE_9__helpers_clients.a.clientName is not a function

Upvotes: 1

Views: 531

Answers (2)

ChrisR
ChrisR

Reputation: 4008

You are declaring the function clientName inside the render method of the class Clients. This function is only accessible inside it's scope, the render method. To access the function like you would, by calling the class Clients static method clientName, you should write it like this:

import React, { Component } from 'react'

class Clients extends Component {
    static userEnum = {
        SMALL: 1,
        MEDIUM: 2,
        LARGE: 3,
        properties: {
            1: { name: "Admin", value: 1 },
            2: { name: "Manager", value: 2 },
            3: { name: "Standard", value: 3 }
        }
    };

    static clientName(value) {
        return Clients.userEnum.properties[value].name;
    }
    render() {

        return null;
    }
}

export default Clients

If you do not intend to render anything with this class, you do not need react, and can simply create a utility/static class like below:

export default class Clients {
    static userEnum = {
        SMALL: 1,
        MEDIUM: 2,
        LARGE: 3,
        properties: {
            1: { name: "Admin", value: 1 },
            2: { name: "Manager", value: 2 },
            3: { name: "Standard", value: 3 }
        }
    };

    static clientName(value) {
        return Clients.userEnum.properties[value].name;
    }
}

Upvotes: 1

Lukilas
Lukilas

Reputation: 176

the function clientName is not a property of your class, but a local function inside the render function and therefore not accessible from the outside.

To solve this, you have to make clientName as well as your userEnum properties of the Clients object, for example in the constructor:

import React, {Component} from 'react'

class Clients extends Component {
  constructor(props){
    super(props);
    this.userEnum = {
      SMALL: 1,
      MEDIUM: 2,
      LARGE: 3,
      properties: {
        1: {name: "Admin", value: 1},
        2: {name: "Manager", value: 2},
        3: {name: "Standard", value: 3}
      }
    };
  }
  
  function clientName (value) {
    return this.userEnum.properties[value].name
  }

  function render () {
    return null
  }
}

export default Clients

Upvotes: 0

Related Questions